重绘和重排

DOM树：表示页面结构。
渲染树：表示DOM节点如何显示。

原理

首先要了解CSS的图层的概念（Chrome浏览器）

浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。在渲染DOM的时候，浏览器所做的工作实际上是：
1. 获取DOM后分割为多个图层
2. 对每个图层的节点计算样式结果（Recalculate style–样式重计算）
3. 为每个节点生成图形和位置（Layout–回流和重布局）
4. 将每个节点绘制填充到图层位图中（Paint Setup和Paint–重绘）
5. 图层作为纹理上传至GPU
6. 符合多个图层到页面上生成最终屏幕图像（Composite Layers–图层重组）

Chrome中满足以下任意情况就会创建图层：
* 3D或透视变换（perspective transform）CSS属性
* 使用加速视频解码的<video>节点
* 拥有3D（WebGL）上下文或加速的2D上下文的<canvas>节点
* 混合插件（如Flash）
* 对自己的opacity做CSS动画或使用一个动画webkit变换的元素
* 拥有加速CSS过滤器的元素
* 元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
* 元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染ÿ