Frontend Academy · 课时

页面如何渲染：解析 DOM、CSSOM、布局与绘制

Q: 「页面如何渲染：解析 DOM、CSSOM、布局与绘制」这节课中我会学到什么？

了解浏览器如何处理 HTML 和 CSS 字节：构建 DOM、CSSOM，计算布局并绘制像素。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

了解浏览器如何处理 HTML 和 CSS 字节：构建 DOM、CSSOM，计算布局并绘制像素。

第 3 / 4 课13 个步骤

页面如何渲染：解析 DOM、CSSOM、布局与绘制 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

从字节到像素

当浏览器从服务器接收 HTML 字节后，会经过多步流程，将它们转换成您在屏幕上看到的像素。了解这套流程有助于您优化性能，并理解视觉异常是如何产生的。

第 1 步——解析 HTML：构建 DOM

浏览器的 HTML 解析器读取字节流，并构建文档对象模型（DOM）——这是一棵由节点组成的树，表示文档中的每个 HTML 元素、文本节点和注释。

<!-- This HTML... -->
<div>
  <p>Hello</p>
</div>

// ...becomes a DOM tree:
// Document
//   └── html
//         └── body
//               └── div
//                     └── p
//                           └── 'Hello'

第 2 步——解析 CSS：构建 CSSOM

与此同时，CSS 字节会被解析为CSS 对象模型（CSSOM）——一棵样式规则树。CSS 会阻塞渲染：在计算出可见内容的样式之前，浏览器不会绘制像素。

第 3 步——渲染树

浏览器会将 DOM 和 CSSOM 合并成渲染树。渲染树只包含可见节点——带有 display:none 的元素会被排除。渲染树中的每个节点都保存着绘制时要使用的计算样式。

第 4 步——布局（回流）

布局会根据盒模型和视口宽度，计算渲染树中每个节点的确切位置和大小。这也称为回流。布局的开销很大，因此应避免在 JavaScript 中反复触发它。

第 5 步——绘制

绘制会将布局转换为屏幕上的实际像素。浏览器会逐层绘制背景、边框、文本和图像。某些元素会创建自己的合成层，以便使用 GPU 加速渲染。

第 6 步——合成

浏览器的合成器会将绘制好的各层合成为最终画面，并将其发送到屏幕。使用 transform 和 opacity 制作动画，可以让合成器在 GPU 上运行这些动画，完全跳过布局和绘制。

什么会阻塞渲染？

中的 CSS 会阻塞渲染。默认情况下，JavaScript 既会阻塞解析器，也会阻塞渲染。在 script 标签上使用 defer，可以在不阻塞渲染的情况下，等 HTML 解析完成后再解析 JS。

<script src="app.js" defer></script>

关键渲染路径

关键渲染路径是从接收 HTML 字节到显示第一个像素的整个流程。优化它意味着减少会阻塞渲染的资源数量和大小，并延后加载非关键的 JS 和 CSS。

回流与重绘

更改布局属性（宽度、外边距、位置）会触发回流和重绘。更改仅影响视觉效果的属性（颜色、背景）只会触发重绘。更改变换或不透明度只会触发合成。应优先选择成本最低的操作。

DevTools：查看绘制时间线

在 Chrome DevTools 中打开性能面板，记录一次页面加载，然后检查瀑布图。您会看到绿色的绘制事件，并可以找出哪些元素导致了开销较大的布局。

快速检查

哪一步会计算页面中每个元素的确切大小和位置？

在交互式课程中回答

回顾：渲染流程

HTML → DOM → CSSOM → 渲染树 → 布局 → 绘制 → 合成。每一步都会为下一步提供输入。优化关键渲染路径，就是缩短这套流程，让第一个可见内容尽可能快地出现。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 41
课程: 163

免费开始学习查看完整课程

常见问题解答

「页面如何渲染：解析 DOM、CSSOM、布局与绘制」课时是免费的吗？

是的 — 「页面如何渲染：解析 DOM、CSSOM、布局与绘制」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「页面如何渲染：解析 DOM、CSSOM、布局与绘制」这节课中我会学到什么？

了解浏览器如何处理 HTML 和 CSS 字节：构建 DOM、CSSOM，计算布局并绘制像素。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「页面如何渲染：解析 DOM、CSSOM、布局与绘制」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy