浏览器拿到HTML文档过后，按照以下步骤进行首页渲染：
- 构建DOM树
- 构建CSSOM树
- 将DOM树与CSSOM树进行合并，合并成渲染树（Render Tree）
- 布局：浏览器根据渲染树，计算出每个节点具体坐标位置以及大小
- 绘制：填充颜色，背景边框等
- 合成：浏览器将各个图层分别绘制过后，最后由GPU合成在一起
[网络资源]
|
+--> HTML --> DOM 树 \
| +--> [渲染树] --+--> [布局] --> [分层绘制]
+--> CSS --> CSSOM 树 / | |
V V
[JS 脚本] --------------------------> [重绘/重排] ----> [GPU 合成] --> 屏幕
回流(Reflow)：当渲染树发生变化的时候，在布局这一步就会重新计算 重绘(Repaint)：当布局发生变化的时候，绘制这一步就会重新计算，或者是没有改变布局，就会跳过布局，重新执行绘制这一个步骤