HTML 页面渲染过程
浏览器如何将 HTML、CSS 解析并渲染成可视化页面
问题
浏览器是如何将 HTML 页面渲染成可视化图像的？
解答
基本概念
渲染过程涉及几个关键组件：
HTML 解释器：将 HTML 文本解析成 DOM 树（文档对象模型）。
CSS 解释器：解析样式表，为 DOM 元素添加样式信息，为布局计算提供依据。
布局引擎：结合 DOM 和 CSS 样式信息，计算元素的大小、位置等布局信息，形成渲染树。
JavaScript 引擎：执行 JavaScript 代码，修改 DOM 和 CSS，影响最终的渲染结果。
渲染流程
1. 解析 HTML，创建 DOM 树
浏览器解析 HTML 源码，创建 DOM 树。每个 HTML 标签对应一个节点，文本内容也会生成文本节点。DOM 树的根节点是 documentElement（对应 <html> 标签）。同时并行请求 CSS、图片、JavaScript 等资源。
2. 解析 CSS，构建 CSSOM 树
浏览器解析 CSS 代码，构建 CSSOM 树。非法语法会被忽略。样式优先级顺序：
浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < HTML style 属性3. 合并生成渲染树
将 DOM 树和 CSSOM 树合并，生成渲染树（Rendering Tree）。渲染树与 DOM 树的区别：
- 忽略不需要渲染的元素（如
<head>、display: none的元素） - 文本的每一行都是独立节点
- 每个节点存储对应的 CSS 属性
4. 布局和绘制
根据渲染树计算每个节点的几何信息（位置、大小），然后将页面绘制到屏幕上。
这四个步骤不是一次性完成的。当 DOM 或 CSSOM 被修改时，会重复执行相应步骤。
重绘与重排
Repaint（重绘）
当元素样式改变但不影响布局时（如 background-color、border-color、visibility），浏览器会重新绘制元素外观。重绘不会触发重排。
Reflow（重排）
当元素的位置、大小等布局信息改变时，需要重新计算布局。重排必然导致重绘，但重绘不一定需要重排。
渲染优化
合并样式操作：将多次样式修改合并成一次操作。
使用绝对定位：对需要频繁重排的元素（如动画元素）设置 position: absolute 或 fixed，使其脱离文档流，避免影响其他元素。
先隐藏再操作：对需要复杂操作的元素，先设置 display: none，操作完成后再显示，只触发两次重排。
关键点
- 渲染过程：HTML 解析 → DOM 树 → CSS 解析 → CSSOM 树 → 合并生成渲染树 → 布局 → 绘制
- 渲染树会忽略不可见元素（
display: none、<head>等），且每个节点包含完整的样式信息 - 重排（布局改变）必然导致重绘，但重绘（样式改变）不一定触发重排
- 优化方向：减少 DOM 操作次数、使用绝对定位隔离频繁变化的元素、批量修改样式
目录