第一步： Create/Update DOM And request css/image/js

浏览器请求到HTML代码后，在生成DOM的最开始阶段（应该是 Bytes → characters 后），并行发起css、图片、js的请求，无论他们是否在HEAD里。注意：发起 js 文件的下载 request 并不需要 DOM 处理到那个 script 节点，比如：简单的正则匹配就能做到这一点，虽然实际上并不一定是通过正则：）。这是很多人在理解渲染机制的时候存在的误区。

第二步：Create/Update Render CSSOM

CSS文件下载完成，开始构建CSSOM

第三部：Create/Update Render Tree

所有CSS文件下载完成，CSSOM构建结束后，和 DOM 一起生成 Render Tree。

第四部：Layout

有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置。

第五步：Painting

Layout后，浏览器已经知道了哪些节点要显示（which nodes are visible）、每个节点的CSS属性是什么（their computed styles）、每个节点在屏幕中的位置是哪里（geometry）。就进入了最后一步：Painting，按照算出来的规则，通过显卡，把内容画到屏幕上。

Repaint（重绘）：屏幕的一部分要重画

引起重绘的操作

1. visibility
2. outline
3. background color

Reflow（回流）：元件的几何尺寸变化了。要重新验证并计算Render Tree

1. 改变窗口大小
2. 改变字体
3. 增加和删除样式表
4. 内容的改变，比如用户在输入框输入文字
5. 激活伪类
6. 操作class属性
7. 脚本操作DOM
8. 计算offsetWidth和offsetHeigh
9. 设置style属性