浏览器是如何呈现网页的？（关键渲染路径&回流&重绘）

从获取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的图层的概念，绘制多个图层

1. 重绘

由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的，称为重绘，例如color、background等。

2. 回流

当浏览器必须重新处理和绘制部分或全部页面时，回流就会发生，例如某个节点的宽高发生了变化就会触发回流。

回流必然触发重绘，重绘不一定会回流。 这很好理解，回流相当于回到了Layout这一步，而重绘是回到了Paint这一步。当没有更改节点的位置信息时，只会触发重绘。当只修改transform、opacity、filters时只触发Composite。