前端性能优化之回流和重绘
回流和重绘优化
- translate 替代 top 改变
- opacity 替代 visibility
- 不要一条一条的修改 DOM 的样式，预先定义好 class，然后修改 DOM 的 className
- 把 DOM 离线后修改，比如：先把 DOM 给 display:none（有一次 reflow），然后你修改 100 次，然后再把它显示出来
- 不要把 DOM 节点的属性值放在一个循环里面当成循环里的变量
- 不要使用 table 布局，可能一个很小的改动都会造成整个 table 的布局
- 动画实现的速度选择
- 对于动画新建图层
- 启用 GPU 硬件加速
Chrome 创建图层的的条件
图层的作用是让回流和重绘都在一个区域里进行，也就是硬件加速
- 3D 或透视变换（prespective transform）CSS 属性
- 使用加速视频解码的
<video>节点 - 拥有 3D（webGL）上下文或加速的 2D 上下文的
<canvas>节点 - 混合插件（如：flash）
- 对自己的 opacity 做 CSS 动画或使用动画 webkit 变换的元素
- 拥有加速 CSS 过滤器的元素
- 元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
- 元素有 z-index 较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）
