描述浏览器中的页面渲染过程？

Posted 2023-02-22

【中文标题】描述浏览器中的页面渲染过程？

【英文标题】：Describe the page rendering process in a browser?

【发布时间】：2011-11-22 20:01:06

【问题描述】：

首先，我对这个问题所涉及的整个请求-响应过程不感兴趣

What is the complete process from entering a url to the browser's address bar to get the rendered page in browser?

我想知道浏览器在收到来自服务器的 html 响应后会发生什么。问这个问题的目的是了解客户端脚本的内部细节。如果您可以用抽象的概念解释 Web 浏览器的组成部分，那将是有益的。您可以将它们称为 CSS 引擎、javascript 引擎等。目标是精确地可视化我正在做的 Web 开发。

很遗憾，我没有找到任何解决此问题的网络资源。如果有资源可以解释这些概念，请原谅我。如果这个问题太详尽而无法回答，您可以指出资源（书籍等）。

【问题讨论】：

webkit source code / mozilla source code

我正在寻找一些抽象描述，以帮助普通 Web 开发人员可视化客户端脚本过程。我敢肯定，即使从头开始编写 mozilla 也会以某种抽象的方式将其可视化。

最好的办法是阅读 Tali Garsiel 的 How Browsers Work。

@Anatoni Papirovski，当解析 html 遇到

@pphanireddy，我已经阅读了“浏览器的工作原理”，想知道在解析 html 并遇到

【参考方案1】：

请完成以下步骤，您应该清楚请求生命周期以及如何呈现响应。

您在首选浏览器的地址栏中键入 URL。

浏览器解析 URL 以查找协议、主机、端口和路径。

它形成一个 HTTP 请求（很可能是协议）

要到达主机，它首先需要将人类可读的主机转换为 IP 号，并通过在主机上进行 DNS 查找来做到这一点

然后需要在指定端口（通常是端口 80）上从用户计算机打开一个到该 IP 号的套接字

当连接打开时，HTTP 请求被发送到主机主机将请求转发到配置为侦听指定端口的服务器软件（通常是 Apache）

服务器检查请求（通常只检查路径），并启动处理请求所需的服务器插件（对应于您使用的服务器语言，php、Java、.NET、Python？）

插件获取完整请求的访问权限，并开始准备 HTTP 响应。

为了构建响应，（很可能）访问了一个数据库。根据请求路径（或数据）中的参数进行数据库搜索

来自数据库的数据，连同插件决定添加的其他信息，被组合成一长串文本（可能是 HTML）。

插件将该数据与一些元数据（以 HTTP 标头的形式）结合起来，并将 HTTP 响应发送回浏览器。

浏览器接收到响应，并解析响应中的 HTML（95% 的概率被破坏）

DOM 树是由损坏的 HTML 构建的

对于在 HTML 源代码中找到的每个新资源（通常是图像、样式表和 JavaScript 文件），都会向服务器发出新请求。

返回第 3 步，对每个资源重复此操作。

样式表被解析，每个样式表中的渲染信息被附加到 DOM 树中的匹配节点

解析并执行JavaScript，移动DOM节点并相应更新样式信息

浏览器根据DOM树和每个节点的样式信息在屏幕上渲染页面

您会在屏幕上看到页面

整个过程太慢了，你会生气。

【讨论】：

浏览器在第一个 HTML 元素被解析后立即开始渲染页面。它当然不会等待 DOM 树完成，更不用说加载所有外部资源了。也许您可以编辑您的答案，以澄清 13-18 中的至少一些步骤作为管道发生（一次一个元素？），而不是顺序发生。

【参考方案2】：

Mozilla 的 David Baron 的精彩演讲详细讨论了这一点。这是一个名为 Faster HTML and CSS: Layout Engine Internals for Web Developers 的视频，它会引导您完成将 DOM 树渲染到屏幕的五个步骤：

构造 DOM 计算样式 构造渲染树 计算布局 油漆

【参考方案3】：

我将尝试深入解释页面渲染过程。请注意，我并没有像 OP 在问题中提出的那样关注请求响应过程。

一旦服务器向浏览器提供资源（HTML、CSS、JS、图像等），它就会经历以下过程：

解析 - HTML、CSS、JS 渲染 - 构建 DOM 树 → 渲染树 → 渲染树布局 → 绘制渲染树

渲染引擎开始从网络层获取所请求文档的内容。这通常以 8kB 块的形式完成。 DOM 树是根据损坏的响应构建的。 对于在 HTML 源代码中找到的每个新资源（通常是图像、样式表和 JavaScript 文件），都会向服务器发出新请求。 在这个阶段，浏览器将文档标记为交互式并开始解析处于“延迟”模式的脚本：那些应该在文档解析后执行的脚本。文档状态设置为“完成”并触发“加载”事件。 每个 CSS 文件都被解析为一个 StyleSheet 对象，其中每个对象都包含带有选择器的 CSS 规则和对象对应的 CSS 语法。构建的树称为 CSSCOM。 在 DOM 和 CSSOM 之上，创建了渲染树，这是一组要渲染的对象。每个渲染对象都包含其对应的 DOM 对象（或文本块）以及计算出的样式。换句话说，渲染树描述了 DOM 的视觉表示。 在构建渲染树之后，它会经历一个“布局”过程。这意味着为每个节点提供它应该出现在屏幕上的确切坐标。 下一阶段是绘制——将遍历渲染树，并使用 UI 后端层绘制每个节点。 重绘：当更改不影响元素在页面上的位置的元素样式（例如背景颜色、边框颜色、可见性）时，浏览器只需重新​​绘制元素并应用新样式（这意味着“重新绘制”或“重新设计”正在发生）。 重排：当更改影响文档内容或结构或元素位置时，会发生重排（或重新布局）。

网络浏览器的内部结构是什么？ 要理解以上几点解释的页面渲染过程，我们还需要了解网络浏览器的结构。

用户界面： 用户界面包括地址栏、后退/前进按钮、书签菜单等。浏览器的每个部分都显示，除了您看到请求页面的窗口。 浏览器引擎：浏览器引擎在 UI 和渲染引擎之间编组操作。 渲染引擎：渲染引擎负责显示请求的内容。例如，如果请求的内容是 HTML，则渲染引擎会解析 HTML 和 CSS，并将解析后的内容显示在屏幕上。 网络：网络处理网络调用（例如 HTTP 请求），在独立于平台的接口后面使用针对不同平台的不同实现。 UI 后端： UI 后端用于绘制基本小部件，例如组合框和窗口。此后端公开了一个非平台特定的通用接口。在它下面使用操作系统用户界面方法。 JavaScript 引擎： JavaScript 引擎用于解析和执行 JavaScript 代码。 数据存储：数据存储是一个持久层。浏览器可能需要在本地保存各种数据，例如 cookie。浏览器还支持 localStorage、IndexedDB、WebSQL 和 FileSystem 等存储机制。

注意： 在渲染过程中，图形计算层也可以使用通用 CPU 或图形处理器 GPU。 当使用 GPU 进行图形渲染计算时，图形软件层将任务分成多个部分，因此它可以利用 GPU 大规模并行性来进行渲染过程所需的浮点计算。

有用的链接： 1.https://github.com/alex/what-happens-when 2.https://codeburst.io/how-browsers-work-6350a4234634