《Web前端开发最佳实践》读书笔记

总的来说，这本书给我感觉帮助不大，比较适合新手，对新手养成好的习惯有些帮助。更深层次的东西比较少，而且由于书的发行周期，对于前端这种日新月异的技术来说，过时、与新技术新理念脱节，是没法避免的事情（2017.12.24）

第二章 高效Web前端开发

前端代码重构过程

1. 删除无用代码，精简代码，主要是已经不起作用的CSS样式和废弃的JS函数
2. 前端代码规范化
3. 整理基础类库
4. 前端代码模块化
5. 提高页面加载性能

前端重构最佳实践

1. 重构前预估风险，最好在重构之前完善自动化测试
2. 明确重构的目的和范围，目的主要是提高代码的可维护性、可读性和性能
3. 先易后难，循序渐进
4. 重构过程中持续测试
5. 针对性能提升的重构，要事先检测代码整体性能并量化，找出性能瓶颈。冲重构过程中要持续监控性能，对比性能提升效果

降低浏览器兼容性问题

使用html5shiv框架，支持html5标签，html5shiv框架的引入要在head部分

使用Modernizr库，首先在html标签上添加一个no-js的类，可以检测当前浏览器是否支持CSS3属性，如果不支持会在html上增加对应的以no-为前缀的类名，在CSS中就可以通过使用这些类添加向后兼容的代码

代码和资源压缩

1. 服务器开启Gzip压缩
2. JSdiamante压塑机
3. CSS代码压缩
4. HTML代码压缩（意义不大）
5. 图片压缩

推荐在开发后期，甚至是在网站的发布阶段进行压缩

命名规范

1. html中标签名和属性全部小写，根据语义和上下级关系命名
2. id使用下划线_
3. class用中横线-
4. JS变量使用驼峰式
5. class或ID仅作为JS的钩子，增加JS前缀
6. JS代码使用单引号

第三章 标准的HTML代码

noscript 标签

noscript 标签的常规用法是当JS脚本被禁用时显示提示信息，此标签缺陷是只在JS被禁用时才会起作用，对其他JS不生效的情况无能为力

最佳实践是，提示用户JS被禁用，并同时提供一个功能简单、不依赖于JS的页面供用户继续浏览，做到平稳降级。

<noscript>
  <meta http-equiv="refresh" content="0 url=//www.baidu.com">
</noscript>

在现如今的情况下，意义不大，没有JS，好多基础功能无法实现，也就没有继续支持的意义。并且不支持JS的情况也少之又少

meta 标签

charset属性用于描述字符编码格式

<meta charset="UTF-8">

name属性用于描述网站信息，keywords值和description值是搜索引擎的主要手段之一，设置这两个meta的content时，要使用简介和语义明确的词语， viewport设置页面显示

<meta name="keywords" content="test, ok">
<meta name="description" content="test, ok">
<meta name="viewport" content="width=device-width,initial-scale=1">

http-equiv 用于设置特定的HTTP指令，refresh值为刷新页面，X-UA-Compatible值设置页面的兼容模式，

<meta http-equiv="refresh" content="0 url=//www.baidu.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>

第四章 高可读性的HTML

要做到标签语义化，首先要尽量少使用div和span标签，尽量找到更有语义的标签来代代替

用text-indent实现文字的隐藏：

.text{
    text-indent: -9999px
}

语义化的HTML最佳实践

1、熟悉标签，理解语义

2、熟悉标签上规范属性，设置必要属性，比如img的alt属性

3、样式和结构分离，比如用after和before在开始或结尾处添加修饰性文字或外观， 用after清楚浮动

注意，before和after是在元素内部开始或结尾添加元素，而不是在元素外部的前或者后添加元素

4、br标签仅仅适用于文本内容中的换行

5、如果图片是作为页面内容的一部分，应该使用img标签，如果图片仅仅是起到装饰作用，则使用背景图

设置网页标题层次

标题使用h标签，一个页面只有一个h1标签，用h1标签作为页面标题，页面各模块从h2标签开始

不要跳级使用h标签，不要通过h标签设置内容样式</