前言

本文提的优化代码不是指压缩代码，而是指从源代码的书写以及css渲染原理上优化代码本身，让你的代码更加健壮，可读性更高。

合理安排selectors

高消耗属性:千万不要组合使用

box-shadow border-radius transforms css filters transparency

重排元素

width height padding margin display border-width border top
position font-size float text-align overflow-y font-weight
overflow left font-family line-height vertical-align right
clear white-space bottom min-height

重绘元素

color border-style visbility background text-decoration
background- outline- box-shadow-border-radius

利用gpu,开启gpu加速

css will change

(http://www.cnblogs.com/yuzhongwusan/p/4186405.html)

  1. .element:hover {
  2.     will-change: transform;
  3.     transition: transform 2s;
  4.     transform: rotate(30deg) scale(1.5);
  5. }

不要优化所有元素

requestAnimationFrame

与Page Visibility(http://www.zhangxinxu.com/wordpress/2012/11/page-visibility-api-introduction-extend/)
冲突

web animations

http://web.jobbole.com/82106/