关键渲染流程阶段解析

Tue, 04 Mar 2025 09:31:00 +0000

考察点分析

该问题主要考察候选人对现代浏览器渲染机制的系统性理解，核心评估维度包括：

具体技术评估点：

渲染引擎工作流：DOM Tree → CSSOM → Render Tree → Layout → Layer → Paint → Composite

DOM树构建：
- 解析器（HTML Parser）通过深度优先遍历生成DOM树，遇到<script>时触发同步解析阻塞（可通过async/defer优化）
- 预加载扫描器（Preload Scanner）并行请求CSS/图片等资源
CSSOM构建：
- 样式表解析完全逆向层级（从底层规则到上层覆盖），需要完整CSSOM才能保证样式计算的准确性
- @import会创建新的HTTP请求链，可能阻塞渲染
布局树生成：
- 合并DOM+CSSOM生成Render Tree，过滤掉display:none等不可见节点
- 进行盒模型计算（重排），输出包含元素几何信息的Layout Tree
分层与绘制：
- 根据will-change、z-index等属性创建合成层（Compositing Layers）
- 绘制模块生成绘制指令列表（Paint Records），不同图层对应独立的位图存储

现代浏览器渲染流程分为六个关键阶段：