今日完成的事

       继续看了下代码的优化

明日计划的事

      划了几天水，明天看点面试题，看看小程序

收获

避免CSS表达式

CSS表达式的执行需跳出CSS树的渲染，因此请避免CSS表达式

移除空的CSS规则

空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所以需移除空的CSS规则

 正确使用Display的属性

Display属性会影响页面的渲染，因此请合理使用

a) display:inline后不应该再使用width、height、margin、padding以及float

b) display:inline-block后不应该再使用float

c) display:block后不应该再使用vertical-align

d) display:table-*后不应该再使用margin或者float

不滥用Float

Float在渲染时计算量比较大，尽量减少使用

不滥用Web字体

Web字体需要下载，解析，重绘当前页面，尽量减少使用

不声明过多的Font-size

过多的Font-size引发CSS树的效率

 值为0时不需要任何单位

为了浏览器的兼容性和性能，值为0时不要带单位

标准化各种浏览器前缀

a) 无前缀应放在最后

b) CSS动画只用 （-webkit- 无前缀）两种即可

c) 其它前缀为 -webkit- -moz- -ms- 无前缀 四种，（-o-Opera浏览器改用blink内核，所以淘汰）

 避免让选择符看起来像正则表达式

高级选择器执行耗时长且不易读懂，避免使用

[JavaScript执行优化]

减少重绘和回流

a) 避免不必要的Dom操作

b) 尽量改变Class而不是Style，使用classList代替className

c) 避免使用document.write

d) 减少drawImage

缓存Dom选择与计算

每次Dom选择都要计算，缓存他

缓存列表.length

每次.length都要计算，用一个变量保存这个值

尽量使用事件代理，避免批量绑定事件

尽量使用ID选择器

ID选择器是最快的

TOUCH事件优化

使用touchstart、touchend代替click，因快影响速度快。但应注意Touch响应过快，易引发误操作

[渲染优化]

HTML使用Viewport

Viewport可以加速页面的渲染，请使用以下代码

<meta name="viewport" content="width=device-width, initial-scale=1">

减少Dom节点

Dom节点太多影响页面的渲染，应尽量减少Dom节点

动画优化

a) 尽量使用CSS3动画

b) 合理使用requestAnimationFrame动画代替setTimeout

c) 适当使用Canvas动画 5个元素以内使用css动画，5个以上使用Canvas动画（iOS8可使用webGL）

高频事件优化

Touchmove、Scroll 事件可导致多次渲染

a) 使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染

b) 增加响应变化的时间间隔，减少重绘次数

GPU加速

CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用

PS：过渡使用会引发手机过耗电增加

页面中杜绝出现死链接（404页面），而且对于用户输入的一个错误页面，我们要引导到404提示页面中（服务器处理的）

避免浏览器中异常错误的抛出

尽可能避免代码出错

使用TRY CATCH做异常信息捕获

增加页面关键词优化