从获取 HTML 文件直到浏览器以像素点的形式在屏幕中绘制出页面的内容的确经验了很多步骤。这些步骤咱们称之为要害渲染门路。
要害渲染门路 这个说法可能听起来会比拟生疏，换用一个常常会在面试中被问到的问题：在浏览器输出 URL 时，Web 页面的出现过程是怎么的？DNS 解析、TCP/IP 四层模型等负责将资源传送给浏览器，而浏览器从拿到资源开始直到页面绘制完结这个过程就是咱们所说的要害渲染门路。
要害渲染门路
轻易关上一个网站，在 Performance 选项卡 reload 一下，放大 FP（First Paint），就会发现在第一次绘制之前会通过一些例如计算款式、布局、绘制等过程。
残缺的一次绘制流程：
| – | 名称 | 形容 |
|---|---|---|
| DOM | 构建 DOM 树 | 在接管到 HTML 文件开始构建 DOM 树 |
| CSSOM | 构建款式树 | 同样的，在解析 HTML 文件时，也会对 CSS 进行解析 |
| Render Tree | 构建渲染树 | 将 DOM 和 CSSOM 树合并为一个用于渲染的树 |
| Layout | 布局 | 从 render 树的根节点开始遍历，计算每个元素所处地位和元素的宽高 |
| Paint | 绘制 | 将节点绘制到屏幕上，包含文本、色彩、边框、暗影和替换的元素等 |
| Composite | 复合 | 这一步和 Paint 是密切相关的，有点相似于 PS 的图层的概念，绘制多个图层 |
- 因为 DOM 的解析是自上而下的，在遇到 JS 文件时会进行对 DOM 的解析而解决 JS。也就是咱们常说的将 JS 放在最末端避免阻塞
- Render Tree 只会标记节点是否显示（
display:none 不渲染、visibility: hidden 会渲染）和计算款式
回流 & 重绘
1. 重绘
因为节点的几何属性产生扭转或者因为款式产生扭转而不会影响布局的，称为重绘，例如 color、background 等。
2. 回流
当浏览器必须重新处理和绘制局部或全副页面时，回流就会产生，例如某个节点的宽高产生了变动就会触发回流。
回流必然触发重绘，重绘不肯定会回流。 这很好了解，回流相当于回到了 Layout 这一步，而重绘是回到了 Paint 这一步。当没有更改节点的地位信息时，只会触发重绘。当只批改 transform、opacity、filters 时只触发 Composite。
更多：在浏览器输出 URL 时，Web 页面的出现过程？