HTML解析 → DOM树 CSS解析 → CSSOM → 合并 → 渲染树 → 布局 → 绘制 → 合成 → 屏幕显示

一、关键渲染流程

1. 解析 HTML → 生成 DOM 树

   • 浏览器逐行解析 HTML，构建**DOM（文档对象模型）**树状结构

   • 遇到 <link> 或 <style> 标签时会暂停 HTML 解析，开始加载 CSS

2. 解析 CSS → 生成 CSSOM

   • 将 CSS 规则解析为**CSSOM（CSS 对象模型）**树

   • 浏览器处理选择器优先级（权重计算）、继承和层叠规则

3. 合并 DOM + CSSOM → 构建渲染树（Render Tree）

   • 结合 DOM 和 CSSOM，过滤不可见元素（如 display: none）

   • 保留可见节点及其计算后的样式信息

4. 布局（Layout/Reflow）

   • 计算每个节点的几何信息（位置、尺寸）

   • 确定视口（viewport）内元素的精确坐标

   • 首次布局称为「回流」

5. 绘制（Painting）

   • 将布局结果转换为屏幕上的像素

   • 分图层绘制（如处理 z-index）

   • 可能触发重绘（Repaint）

6. 合成（Compositing）

   • 将不同图层合并为最终界面

   • 利用 GPU 加速处理动画等效果

---

二、CSS 解析细节

1. 选择器匹配

   • 浏览器从右向左匹配选择器（优化性能）

   • 例：div .box a 先查找 <a> 标签，再向上匹配

2. 层叠规则

   • 优先级顺序：!important > 内联样式 > ID > 类/伪类 > 标签

   • 相同权重时，后定义的样式覆盖前者

3. 继承机制

   • 部分属性（如 font-family, color）会继承到子元素

   • 显式设置 inherit 可强制继承

---

三、性能优化要点

1. 减少回流（Layout Thrashing）

   • 避免频繁读取布局属性（如 offsetWidth）

   • 使用 transform/opacity 等触发合成层（跳过布局和绘制）

2. 选择器优化

   • 避免过度嵌套（如 .nav ul li a）

   • 减少通用选择器 * 的使用

3. 渲染阻塞

   • <link> 标签默认会阻塞渲染，可使用 media 属性优化加载

   • 关键 CSS 可内联以加速首屏渲染

---

四、调试工具

1. Chrome DevTools：

   • Performance 面板：分析完整渲染流程

   • Layers 面板：查看合成层信息

   • Rendering 选项卡：高亮重绘区域

---

总结流程图

复制

HTML解析 → DOM树↓
CSS解析 → CSSOM → 合并 → 渲染树 → 布局 → 绘制 → 合成 → 屏幕显示