从获取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页面的出现过程？