图层与重绘重排与优化《性能优化第三篇》(1)

1. 获取DOM后分割为多个图层

2. 对每个图层的节点计算样式结果 （Recalculate style—样式重计算）

3. 为每个节点生成图形和位置 （layout–布局，重排，回流）

4. 将每个节点绘制填充到图层位图中 （Paint—重绘）

5. 图层作为纹理上传至GPU

6. 组合多个图层到页面上生成最终屏幕图像 （Composite Layers – 图层重组）

图层创建的条件：

=======================================================================

1. 拥有具有3D变换的CSS属性

2. 使用加速视频解码的<video>节点

3. <canvas>节点

4. CSS3动画的节点

5. 拥有CSS加速属性的元素（will-change）