浏览器知识整理(五)：渲染引擎-工作流程及细节
2026-06-21 11:03:33
渲染引擎-工作流程及细节
渲染引擎是浏览器的核心组件之一，负责将HTML、CSS和JavaScript等文档和资源转换成用户可以在屏幕上看到的页面。以下是渲染引擎的工作流程及细节的详细整理：
一、工作流程
请求文档内容
浏览器从网络层请求获取文档的内容，通常使用8K分块的方式逐步接收数据。
解析HTML文档
解析HTML文档，生成DOM树（内容树/解析树）。DOM树的根节点是document对象，树中的元素是HTML文档的对象表示，也是外部内容和HTML元素之间的接口。
在解析过程中，源内容可能被JavaScript修改，因此HTML文档的解析和JavaScript文件的解析、执行存在冲突，不能同时执行。
HTML解析器具有强大的容错机制，用于纠正HTML代码的错误，这种纠错机制虽然不是HTML规范的一部分，但大部分浏览器的纠错机制都相当一致。
词法分析与标记生成
词法分析器（标记生成器）负责将内容分解成有效标记，并将无用字符分离出来。
使用有限状态机算法，输出HTML标记（起始标记、结束标记、属性名称、属性值）。
生成一个标记后，传递给下一步的建树器，然后读取下一个标记，以此往复。
语法分析与建树
建树器向标记生成器请求新标记，并尝试与语法规则匹配。
匹配成功，将对应标记的对象添加到DOM树中，再请求下一个标记。
匹配失败或未找到语法规则，将标记存储到建树器内部或引发异常。
DOM树不断被修改，元素对象被添加到DOM树和开放元素堆栈中，用于纠正错误和处理未关闭的标记。
转换与交互模式
将DOM树转换为机器文档代码。
解析结束后，浏览器将文档标记为交互模式，开始解析被标记为deferred模式的脚本文件。
浏览器将文档状态设置为完成，触发window.onload事件。
解析CSS
使用上下文无关文法解析外部CSS文件以及style标签中的样式。
浏览器通过CSS语法自动创建解析器，解析成包含CSS规则的StyleSheet对象。
标准化样式属性，计算每个节点的具体样式（继承和层叠规则）。
构建渲染树
渲染树在DOM被创建的同时也被创建，由可视化的元素按照显示顺序组成。
渲染树的职责是让浏览器按照正确的顺序绘制内容树中的元素。
渲染树与DOM树相对应，但非可视化元素不会被插入到渲染树中。
布局/重排
为渲染树中的元素计算位置、大小等几何信息。
布局方式分为同步的全局布局和异步的增量布局。
采用“流”的布局方式，从左往右、从上往下遍历文档，但表格等特殊情况需要多次遍历。
使用“Dirty”系统避免小改动导致整体重排，影响性能。
绘制
呈现器的样式进入样式堆栈后按照从后往前的顺序进行绘制。
不同浏览器有不同的实现细节，如Webkit会另存原矩形为位图，只绘制新旧不同部分；FireFox会建立显示列表。
构建图层树与合成
默认情况下，节点图层属于父节点图层，但某些情况会创建单独图层（如显示合成、层叠上下文等）。
渲染引擎将图层绘制拆分成绘制指令，组合成绘制列表。
使用合成线程完成绘制，将图层分块并优先绘制视口附近的图块。
图块数据存入GPU内存，使用GPU加速绘制。
显卡显示内容
合成线程发送命令给浏览器进程的viz组件，根据命令将页面内容绘制到内存中。
将这部分内存发送给显卡，显卡显示屏幕内容，每次更新的图像都来自前缓冲区。
系统将前缓冲区和后缓冲区对换位置，循环更新。
二、细节补充
- HTML解析器的容错机制：HTML解析器具有强大的容错能力，能够纠正许多常见的HTML错误，如未闭合的标签、属性缺失等。这种容错机制使得浏览器能够正确渲染即使存在错误的HTML文档。
- CSS的继承和层叠：CSS的继承规则使得子节点能够默认继承父节点的样式属性。而层叠性则使得页面的最终样式取决于各个样式相互作用的结果，包括内联样式、内部样式和外部样式表等。
- 渲染树的构建：渲染树是DOM树的可视化表示，只包含需要绘制的元素。在构建渲染树时，浏览器会忽略非可视化元素和不可见的元素（如display: none）。
- 布局与重排的优化：为了避免小的改动导致整体页面的重排，浏览器采用了“Dirty”系统来标记需要重排的元素。当元素发生改变时，将其标记为dirty或children are dirty，然后在合适的时机进行重排。此外，浏览器还采用了增量布局等优化策略来提高性能。
- 图层的合成与绘制：为了提高渲染效率，浏览器会将页面分成多个图层进行合成和绘制。每个图层都可以独立地进行变换、动画等操作。合成线程负责将图层合并成最终的图像并发送给显卡进行显示。
综上所述，渲染引擎的工作流程是一个复杂而精细的过程，涉及多个步骤和细节。通过不断优化和改进这些步骤和细节，浏览器能够提供更快速、更流畅的网页浏览体验。
热门标签
