图层重绘与重排

图层重绘与重排

css图层

浏览器再渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上又一个或多个节点，在渲染DOM的时候，浏览器所做的工作实际上时：

1. 获取dom分割为多个图层
2. 对每个图层的节点计算样式的结果（Recalculate style–样式重计算）
3. 为每个节点生成图形和位置（layout—重排，回流）
4. 将每个节点绘制填充到图层位图中（paint—重绘）
5. 图层作为纹理上传到GPU
6. 组合多个图层到页面上生成最终屏幕图像 （Composite-layers–图层重组）

图层创建的条件

chrome浏览器满足一下任何情况都会创建图层

1. 拥有3D变换的CSS属性
2. 使用加速视频解码的节点
3. 节点
4. CSS3动画的节点
5. 用偶遇加速属性的元素(will-change)

重绘(Repaint)

重绘是一个元素外观的改变所触发的浏览器行为，例如outline，背景色等属性，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观，重绘不会带来重新布局，所以不一定伴随重排。

需要注意的是：重绘是以图层为单位，如果图层中某个元素需要重绘，那么整个图层都需要重绘，比如一个图层包含很多节点，其中有个gif图gif图的每一