CSS图层
浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。在渲染DOM的时候，浏览器所做的工作实际上是：
- 获取DOM后分割为多个图层；
- 对每个图层的节点计算样式结果（Recalculate style – 样式重计算）;
- 为每个节点生成图形和位置（Layout – 重排，回流）; （排-排列）
- 将每个节点绘制填充到图层位图中（Paint – 重绘）; （绘-绘制）
- 图层作为纹理上传至GPU;
- 组合多个图层到页面上生成最终屏幕图像（Composite Layers – 图层重组）。
图层创建的条件
Chrome浏览器满足以下任意情况就会创建图层：
-
拥有具有3D变换的CSS属性；
-
使用加速视频解码的 <video> 节点;
-
<canvas>节点；（Echarts）
-
CSS3动画的节点；
-
拥有CSS加速属性的元素（will-change）
