题目
描述浏览器从获取HTML到显示页面的关键渲染步骤
信息
- 类型：问答
- 难度：⭐
考点
浏览器渲染流程,关键渲染路径,HTML解析
快速回答
浏览器渲染页面的主要步骤：
- 解析HTML：构建DOM树
- 解析CSS：构建CSSOM树
- 合并DOM与CSSOM：形成渲染树（Render Tree）
- 布局计算：确定节点位置和尺寸（Layout）
- 绘制页面：将渲染树转换为屏幕像素（Paint）
原理说明
浏览器渲染页面的过程称为关键渲染路径（Critical Rendering Path），包含5个顺序执行的步骤：
- 解析HTML构建DOM树：浏览器逐行读取HTML并解析成树状结构的文档对象模型（DOM）
- 解析CSS构建CSSOM：解析CSS样式表形成CSS对象模型（CSSOM），包含所有样式规则
- 合并生成渲染树：结合DOM和CSSOM，生成只包含可见元素的渲染树（隐藏元素如
display:none不会包含） - 布局计算（Layout/Reflow）：计算每个渲染树节点在视口中的精确位置和尺寸
- 绘制（Paint）：将布局结果转换为屏幕上的实际像素
代码示例
<!DOCTYPE html>
<html>
<head>
<style>
body { font-size: 16px; }
.box { width: 50%; padding: 10px; }
</style>
</head>
<body>
<div class="box">Hello World</div>
</body>
</html>浏览器处理流程：
- 解析HTML构建DOM树（包含
<div class="box">节点） - 解析CSS规则（
body和.box的样式） - 合并生成带样式的渲染树
- 计算
.box宽度（视口宽度的50%+20px内边距） - 将文本和框体绘制到屏幕上
最佳实践
- 优化CSS：减少嵌套层级，避免使用通配符选择器
- 优先加载关键CSS：将首屏样式内联在
<head>中 - 避免布局抖动：不要频繁读写DOM样式（如循环中修改
offsetWidth）
常见错误
- 阻塞渲染的JS/CSS：未添加
async/defer的<script>会阻塞DOM构建 - 未定义尺寸的图片：导致布局完成后重新计算（重排）
- 过于复杂的CSS选择器：增加CSSOM构建时间
扩展知识
- 重绘（Repaint）：颜色等不影响布局的样式变化时发生
- 重排（Reflow）：尺寸/位置变化时触发，代价高昂（需重新执行Layout）
- 合成（Compositing）：现代浏览器使用GPU分层渲染，提升动画性能
