深入浏览器渲染机制：从结构到像素的完整过程

Magicman
72 阅读5分钟

浏览器渲染原理：从输入 URL 到页面呈现

浏览器渲染是前端性能优化和框架设计的基础。理解它的工作流程，可以帮助我们更准确地判断页面的性能瓶颈，也能在开发中做出更合理的代码设计。

一、从输入 URL 开始

当在地址栏输入一个 URL 并回车后，浏览器会依次完成以下工作：

  1. 下载资源：通过网络请求获取 HTML 文件；
  2. 解析 HTML：将文本解析为结构化的 DOM（Document Object Model）；
  3. 解析 CSS：加载样式表，生成 CSSOM（CSS Object Model）；
  4. 构建渲染树（Render Tree） ：将 DOM 与 CSSOM 结合，确定需要绘制的可见节点；
  5. 布局（Layout） ：计算每个节点的尺寸与位置；
  6. 绘制与合成（Paint & Composite） ：将页面内容绘制并显示在屏幕上。

渲染过程是一个依赖链式结构，每一步都基于前一步的结果。理解各阶段的依赖关系，是性能分析的关键。

二、浏览器内核

浏览器的“内核”指渲染引擎（Rendering Engine），它负责解析 HTML、CSS 并绘制页面。

常见渲染引擎包括：

  • Blink：Chrome、Edge、Opera；
  • WebKit：Safari、iOS；
  • Gecko：Firefox。

不同引擎在实现上略有差异，但核心渲染流程相同。了解引擎的差异有助于解释某些兼容性问题。

三、渲染引擎的工作流程

1. HTML 解析与 DOM 构建

浏览器从上到下解析 HTML，生成 DOM 树。每个标签会被转换为一个节点，形成层级结构。

<body>
  <div id="app">
    <h1>Hello</h1>
  </div>
</body>

会被解析为：

Document
 └── html
     └── body
         └── div#app
             └── h1

2. CSS 解析与 CSSOM 构建

当解析到 <link> 或 <style> 时，浏览器会并行加载并解析 CSS，生成 CSSOM。
DOM 与 CSSOM 共同决定页面的样式信息。

需要注意：

  • CSS 下载不会阻塞 DOM 的构建；
  • 但在生成渲染树之前，必须等待 CSSOM 构建完成。

3. 构建 Render Tree

渲染树结合 DOM 与 CSSOM，决定页面上哪些元素可见及其样式信息。
display: none 的元素不会出现在渲染树中。

4. 布局（Layout）

浏览器根据渲染树计算每个节点的几何信息（位置与大小）。
这一阶段确定了页面的整体结构。

5. 绘制（Paint）

浏览器将布局信息转化为屏幕像素，绘制颜色、文字、图片、阴影等内容。

四、回流与重绘

渲染完成后，若页面发生变化，浏览器可能重新计算或重绘部分内容。

1. 回流（Reflow）

当几何信息发生变化时（位置、尺寸、字体大小等），浏览器会重新计算布局，触发回流。
第一次渲染也属于一次回流。

div.style.width = '200px'; // 触发回流

2. 重绘（Repaint）

若仅改变颜色、背景、边框等视觉属性，而几何尺寸不变，则只需重新绘制像素。

div.style.backgroundColor = 'blue'; // 触发重绘

3. 优化策略

  • 批量修改样式（通过修改 class 或 cssText）；
  • 避免频繁访问会触发回流的属性（如 offsetTop、scrollHeight）；
  • 使用 DocumentFragment 或虚拟 DOM 批量更新；
  • 对频繁变化的元素使用 position: absolute/fixed，减少对其他节点的影响。

回流的开销远大于重绘，因此减少回流是前端性能优化的重要方向。

五、合成（Compositing）与图层

浏览器会将页面拆分为多个合成层（Compositing Layer），由 GPU 分别渲染，再合成为最终画面。
这种方式能提高性能，尤其是动画或滚动场景。

常见会触发新图层的情况：

  • 使用 3D 变换（transform: translateZ(0)）；
  • 含有过渡或动画；
  • 使用 position: fixed；
  • 使用 will-change；
  • 元素为 <video>、<canvas>、<iframe>。
.card {
  transform: translateZ(0);
  transition: transform 0.3s;
}

合理使用图层可以加速渲染，但过多图层会增加内存消耗，应根据场景适度使用。

六、JavaScript 与渲染阻塞

HTML 解析器遇到 <script> 标签时会暂停 DOM 构建，下载并执行脚本。
这是因为脚本可能修改 DOM，如果不暂停可能导致结果不一致。

<script src="main.js"></script>

这种方式会阻塞解析。对于体积较大的脚本，会明显影响首屏渲染。
常见优化方式是使用 defer 或 async。

七、defer 与 async 的区别

defer

  • 不阻塞 HTML 解析；
  • 脚本异步下载；
  • DOM 构建完成后按顺序执行；
  • 仅适用于外部脚本；
  • 执行时机在 DOMContentLoaded 事件触发前。
<script src="main.js" defer></script>

async

  • 同样不阻塞 HTML 解析；
  • 下载完成后立即执行，不保证顺序；
  • 适合独立、不依赖 DOM 的脚本（如广告、统计）。
<script src="analytics.js" async></script>
属性阻塞 DOM顺序执行执行时机
默认 script是是立即执行
defer否是DOMContentLoaded 前
async否否下载后立即执行

简单来说：依赖 DOM 的脚本用 defer，独立脚本用 async。

八、浏览器渲染链总结

完整流程如下：

HTML 解析 → DOM 树
CSS 解析 → CSSOM 树
↓
Render Tree 构建
↓
Layout（布局）
↓
Paint（绘制）
↓
Composite（合成）

性能瓶颈集中在：

  • 频繁的回流与重绘；
  • 阻塞型的脚本；
  • 过多的图层创建。

掌握渲染机制的本质，可以更有针对性地进行优化。

九、结语

浏览器渲染是一条从结构到视觉的流水线：HTML 提供结构，CSS 定义样式，JavaScript 驱动交互。
理解这条流水线的每个环节，意味着能精确判断页面性能的来源，也能更好地利用浏览器的特性。

这是所有前端性能优化的理论基础。

avatar
文章
阅读
粉丝