一、HTML解析

浏览器首先接收到HTML文件，然后对其进行解析，创建一个叫做DOM（Document Object Model）的数据结构。DOM是HTML元素的树形表示，它能够让JavaScript和CSS访问和操作页面的内容。

二、CSS解析

同时，浏览器也会解析CSS文件，生成另一个数据结构，称为CSSOM（CSS Object Model）。CSSOM也是一个树形结构，它代表了页面上所有CSS规则的层次关系。

三、渲染树构建

接着，浏览器会将DOM和CSSOM结合起来，创建一个渲染树。渲染树包含了所有需要显示在页面上的DOM节点和这些节点的样式信息。

四、布局

布局阶段，也称为“重排”，是计算渲染树中所有节点在最终页面上的位置和大小。布局的结果是一个“盒模型”，它精确地描绘了每个元素在视口中的位置。

五、绘制

最后，浏览器会通过绘制阶段将渲染树中的每一个节点转化为屏幕上的实际像素。这个过程叫做“重绘”。

延伸阅读

深入理解浏览器的渲染引擎

浏览器的渲染引擎是完成页面渲染的核心，理解其工作原理对于理解页面渲染至关重要。