浏览器如何呈现网页？

在本文中，我们将研究浏览器呈现网页所执行的操作。

🎯 HTML 页面渲染涉及的步骤：

1. DOM 的构建
2. CSSOM 的构建
3. Render树的构建
4. 布局阶段
5. 绘画阶段

🎯 DOM 的构建

• 浏览器从服务器接收一个 HTML 文档binary stream format，该文档基本上是一个带有响应头的文本文件Content-Type = text/html; charset=UTF-8。

• 当浏览器读取 HTML 文档时，每当遇到 HTML 元素时，它都会创建一个名为Node 的JS 对象。最终，所有 html 元素都会转换为Node。

• 浏览器从 HTML 文档创建节点后，它必须创建这些节点对象的“树状”结构。

文档对象模型是浏览器提供的高级 Web API，用于高效地呈现网页并公开展示，以便开发人员动态地操作 DOM 元素以实现各种目的。

🎯 CSSOM 的构建

• 构建 DOM 之后，浏览器从所有源读取 CSS 并构建 CSSOM（CSS 对象模型）——一种树状结构。

• 该树中的每个节点都包含 CSS 样式信息，这些信息将被复制到其目标 DOM 元素。

• 大多数浏览器都自带样式表，称为用户代理样式表。它是 Web 浏览器使用的默认样式表。即使没有应用任何 CSS，浏览器仍然需要以某种方式呈现内容，而浏览器会使用用户代理样式表来实现这一点。

🎯 渲染树的构建

• DOM 和 CSSOM 组合在一起形成一个渲染树，其中包含必须在页面上显示的节点。

• 从 DOM 树的根节点开始，遍历每个可见节点并应用相应的 CSSOM 规则。最终，它生成包含可见节点、内容和样式的渲染树。

• 它是最终将在屏幕上打印的内容的低级表示，它不包含在像素矩阵中不占用任何区域的节点（如、、head标签）。metalink

正如您上面注意到的，包含 CSS 属性的节点display: none不是渲染树的一部分。

🎯 布局阶段

• 这个阶段可以说是几何阶段，我们计算节点的几何形状。

• 在布局阶段，计算节点相对于浏览器视口的精确位置及其大小。通过这种方式，生成一个知道精确位置和大小的盒子模型。此过程也称为布局或重排。

• Layout阶段生成的盒子模型：

🎯 绘画阶段

• 我们知道了可见节点、它们的样式和几何形状，现在所有这些信息都用于将渲染树中的节点渲染到屏幕上的实际像素。这个过程称为“绘制”。它使用 UI 后端层。

🎯 总结！！

本文就到这里。感谢您的阅读！让我们一起学习，共同成长。

LinkedIn Twitter Instagram