动画02 浏览器的重绘与重排以及动画性能优化

浏览器渲染过程

大体上，浏览器渲染过程分为5步

1. 处理HTML生成DOM树
2. 处理CSS生成样式树
3. 将DOM树和样式树合并为Render树（渲染树）
4. 对Render树进行布局计算，生成盒模型
5. 绘制信息
6. 合成涂层（复合层）

要注意的是，UI的重绘是在Event Loop中的Marco Task队列中进行的

分层

上面的渲染过程，总共有三个Layer：

1. Layout Layer， 布局层，将元素防止在屏幕上，形成Dom树
2. Render Layer， 渲染层，处理层叠关系，透明度等，形成Render树
3. Composite Layer， 复合层，利用GPU单独进行渲染的Layer

重排（reflow）

当改变了影响布局元素的CSS样式，比如width、height、left、top等（transform除外），浏览器会将当前的Layout标记为dirty，这会让浏览器在下一帧进行全局的重排。

要注意，重排发生在下一帧、下一次渲染的时候，并非在JS语句执行后立刻执行。

在当前Layer标记为dirty的情况下，当读取元素的offsetTop、scrollHeight几何属性时，浏览器也会立即重排，保证在JS获取到的属性是正确的。

这一过程会将本在渲染正常流程中执行的重排提前到JS执行过程中，会延缓执行效率。

会触发重排的操作有：

1. DOM元素的几何属性变化
2. DOM树的结构变化，节点增减、移动等
3. 元素内容改变
4. 页面渲染初始化（无法避免）
5. 浏览器窗口尺寸变化
6. 读取OffsetLeft、OffsetHeight、clientWidth、offsetTop、getComputedStyle等属性</