前端性能优化之回流和重绘

回流和重绘优化

1. translate替代top改变
2. opacity替代visibility
3. 不要一条一条的修改DOM的样式，预先定义好class，然后修改DOM的className
4. 把DOM离线后修改，比如：先把DOM给display:none（有一次reflow），然后你修改100次，然后再把它显示出来
5. 不要把DOM节点的属性值放在一个循环里面当成循环里的变量
6. 不要使用table布局，可能一个很小的改动都会造成整个table的布局
7. 动画实现的速度选择
8. 对于动画新建图层
9. 启用GPU硬件加速

Chrome创建图层的的条件（图层的作用是让回流和重绘都在一个区域里进行，也就是硬件加速）

1. 3D或透视变换（prespective transform）CSS属性
2. 使用加速视频解码的<video>节点
3. 拥有3D（webGL）上下文或加速的2D上下文的<canvas>节点
4. 混合插件（如：flash）
5. 对自己的opacity做CSS动画或使用动画webkit变换的元素
6. 拥有加速CSS过滤器的元素
7. 元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
8. 元素有z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）