重绘和回流优化方案

1.css样式替换

• 用translate替代top等属性
• 用opacity替代visibility,但是要同时有translate3d 或 translateZ 这些可以创建的图层的属性存在才可以阻止回流

*注意：如果希望opacity不引发回流，还需要使其dom作为单独一个图层才行(可以用transform:translateZ(0)创建图层)

2.减少dom样式的修改次数

不要一条一条地修改DOM的样式，预先定义好class，然后修改DOM的className

3.把DOM离线后修改

例如，先把DOM给display:none(有一次reflow)，然后你修改100次(这100次不会回流)，然后再把它显示出来

4.不要把DOM的属性值作为一个循环里的变量

例如offsetHeight,offsetWidth,因为每次读取这些属性，浏览器为了获取最新的offsetHeight,offsetWidth，会导致回流

5.不要使用table布局

6.动画实现的速度的选择

例如动画设置间隔1ms,显然不合理

7.可对动画新建图层，但是不要乱用

建立一个图层，让回流在这些图层里面进行，限制回流和重绘的范围，减少浏览器的运算工作量

创建图层的条件:

• 1. 一个dom 元素拥有 3d 或 透视变换的css 属性（persepective, transform）
• 2. video 标签
• 3. 拥有3d 上下文或加速 2d 上下文的 canvas 节点
• 4. 混合插件 flash
• 5. 自己做的opacity 动画 或 使用一个动画 webkit 变换的元素
• 6. 拥有 translate3d 或 translateZ 这两会使 GPU 加速的属性
• 7. 一个包含复合层子节点的元素。（有点绕，可以这样想：其实本身整个网页页面就是一个图层，html 标签下包含着若干的标签 head, body,..... 这样便满足了这个条件了）
• 8. 元素有一个其 z-index 比它低的兄弟节点。由于 z-index 控制的是元素上下层的关系，所以当上下层关系变换的时候就需要一个图层去渲染，因此满足这个条件的元素也会被创建一个图层

8.启用GPU硬件加速

使用translate3d属性可以开启