浏览器渲染原理

约 769 字大约 3 分钟

2025-03-14

提问

浏览器在拿到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。在事件循环机制的作用下，渲染主线程取出渲染任务开始渲染流程。

渲染流程

整个渲染流程分为多个阶段： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、展示。

每个阶段都有明确的输入和输出，形成一套严密的生产流水线。

输入：HTML文档
输出：DOM树、CSSOM树

解析 HTML 过程中遇到 CSS 会解析 CSS，遇到 JS 会执行 JS。为了提高效率，浏览器在开始解析前会启动预解析线程，先行下载 HTML 中用到的外部的 CSS、JS 文件。

下载和解析 CSS 文件的工作是在预解析线程中进行的，所以 CSS 解析不会阻塞主线程。

而 JS 执行可能会影响 DOM 树，因此执行 JS 时主线程会被阻塞。

本阶段完成后，会得到 DOM 树和 CSSOM 树，浏览器默认样式、内部样式、行内样式均会包含在 CSSOM 树中。

输入：DOM树、CSSOM树
输出：带样式的DOM树

主线程会一次遍历 DOM 树，为树中每个节点计算出最终样式（Computed Style）。

这一过程中，很多预设值会转变成绝对值，相对单位会转变成绝对单位。

这一阶段完成后，会得到一棵带样式的 DOM 树。

输入：带样式的DOM树
输出：布局树

依次遍历 DOM 树的每一节点，计算节点几何信息（宽高、相对包含快的位置）。

提示

大部分时候，布局树和 DOM 树并非一一对对应。

比如 display: none 的节点没有几何信息，因此不会生成到布局树；又如伪元素选择器，虽然 DOM 书中不存在这些伪元素节点，但是他们拥有几何信息，因此会被天机道布局树中。

本阶段完成后会产生一棵布局树。

主线程会根据库一套复杂的策略对整个布局树进行分层。

分层的优势在于：将来某一层改变后，仅会对该层进行处理，提升效率。

可能影响分层的事物：

对每一层生成绘制指令集，描述如何绘制该层内容。

完成分层后，主线程将信息提交给合成线程，剩余工作在合成线程中完成。

合成线程先将每个图层分块，划分成更多的小区域。

将每个快变成位图，优先处理靠近视口的分块。

最后调用 GPU 硬件将页面渲染到屏幕上。