Web浏览器如何渲染HTML文档

当接收到字节时，浏览器将HTML分析到DOM树中。 2。诸如CSS和JavaScript之类的外部资源是异步加载的，CSS是构造阻滞，常规JavaScript正在解析。 3。CSS被解析为CSSOM，这是一种与DOM结合形成渲染树的样式规则的树。 4。渲染树是仅使用可见元素及其计算样式构建的。 5。布局（或反射）从根开始计算每个元素的确切位置和大小。 6.绘画通过在层上绘制文本，颜色，边框和其他视觉元素，将渲染树转换为像素数据。 7.合成以正确的顺序结合了这些图层，以有效地产生最终的屏幕图像。整个渲染管道（放置，构造树木，布局，绘画和合成）以毫秒为单位，并重复进行更改，从而实现快速，交互式网页。

当您打开网页时，您的浏览器会通过一系列步骤将RAW HTML（以及相关资源（如CSS和JavaScript））变成一个完全渲染的交互式页面。此过程称为渲染管道。这是Web浏览器呈现HTML文档的方式：

1。将HTML解析到DOM中

第一步是读取HTML文件并将其转换为浏览器可以使用的结构化格式：文档对象模型（DOM） 。

• 浏览器通过字节读取HTML字节并将其解析为令牌（例如<div> ， <code> ，属性，文本）。
• 这些令牌然后变成节点，这些节点被组织成一个称为DOM树的树结构。
• DOM代表文档的结构和内容，可以通过JavaScript访问。

注意：DOM是逐步构建的。一旦下载了HTML块，就开始解析了 - 它不会等待整个文件。



---

2。加载外部资源

在解析HTML时，浏览器会遇到对外部资源的引用：

• CSS文件（ <link rel="stylesheet"> ）
• JavaScript文件（ <script src="..."></script> ）
• 图像，字体等。

这些是异步下载的（并行），但是：


• CSS正在渲染障碍：浏览器等待渲染直到CSS解析，因为样式会影响布局。
• JavaScript是解析器阻滞（默认情况下） ：当解析器击中常规<script></script>标签时，它会停止HTML解析以获取和执行脚本 - 除非脚本使用async或defer 。

---

3。解析CSS并构建CSSOM

浏览器将CSS解析（从外部文件， <style></style>标签或内联标签）中解析到CSS对象模型（CSSOM）中。

• CSSOM是一种类似树状的结构，可将CSS规则映射到元素。
• 与DOM不同，CSSOM不是公开的，而是确定元素的样式。
• 它也是渲染障碍物，这意味着浏览器在准备好之前不会绘制任何东西。

DOM和CSOM一起形成渲染树。

---

4。建造渲染树

浏览器结合了DOM和CSSOM以创建渲染树：

• 仅包括可见元素（例如，不包括display: none或<script></script> ， <meta> ）。
• 渲染树中的每个节点都计算出样式（解决继承，级联等之后）。
• 这棵树代表屏幕上实际绘制的东西。

---

5。布局（反流）

现在，浏览器知道要渲染的元素及其样式，它可以计算出来：

• 每个元素应出现在页面上的位置（位置，大小）。
• 此过程称为布局或反流。
• 它从渲染树的根开始（通常是元素），然后递归计算每个节点的几何形状。

此步骤在计算上很昂贵，尤其是对于复杂的布局。

---

6。绘画（栅格化）

布局后，浏览器将绘制像素：

• 渲染树被分解为层。
• 在内存中将每个图层绘制成位图（基于像素的图像）。
• 这涉及绘制文本，颜色，边界，阴影等。
• 现代浏览器可能会将内容分为多层以供性能（例如，使用will-change或transform ）。

---

7。合成

最后，浏览器复合涂料层：

• 按正确顺序绘制图层以形成最终的屏幕图像。
• 此步骤处理重叠的元素，透明度，z索引等。
• 它经过优化，以便仅重新粉刷或重新分配更改层（例如，在动画期间）。

---

奖励：JavaScript的影响

JavaScript可以中断或修改整个过程：

• 脚本可以读取或修改DOM和CSSOM。
• 呼叫诸如window.getComputedStyle()或offsetHeight迫使浏览器同步执行布局的方法，如果反复进行，则可能会导致性能问题。

---

渲染管道的摘要

1. 解析HTML→构建DOM
2. 解析CSS→构建CSSOM
3. 结合DOM CSSOM→渲染树
4. 布局：计算几何形状
5. 油漆：转换为像素
6. 复合：层和显示最终输出

---

整个过程通常以毫秒（通常以毫秒为单位）发生，并且只要发生变化（例如，用户互动，JavaScript更新）就可以重复。了解此流程有助于开发人员编写更快，更有效的网页。

基本上，渲染是浏览器将代码转换为您可以看到并与之互动的东西的方式。