在浏览器中，页面呈现的过程是怎样的？

Question

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

从输入网址到浏览器地址栏中获取渲染页面的完整过程是什么？

我想知道一旦浏览器接收到来自服务器的HTML响应后，内部发生了什么。我问这个问题的目的是为了理解客户端脚本的内部细节。如果您能用抽象的概念解释一个网页浏览器包括哪些组成部分，比如CSS引擎、JavaScript引擎等，那将会很有益处。目标是精确地可视化我正在进行的Web开发。

不幸的是，我没有找到任何解决此问题的网络资源。如果存在解释这些概念的资源（书籍等），请原谅我。如果这个问题太过详尽，您可以指向资源（书籍等）。

- pphanireddy

---

你最好阅读Tali Garsiel的《How Browsers Work》（http://taligarsiel.com/Projects/howbrowserswork1.htm）。 - Anatoli Papirovski

@Anatoni Papirovski，当解析HTML遇到<script>时，浏览器会停止直到脚本执行完毕吗？ - jason

@pphanireddy，我已经阅读了《浏览器是如何工作的》，想知道当解析HTML遇到<script>时，浏览器是否会暂停直到脚本执行完成？ - jason

默认情况下，JavaScript 会阻止 DOM 构建，从而延迟首次渲染（渲染阻塞）。每当解析器遇到脚本时，它必须在继续解析 HTML 之前停止并执行它。对于外部脚本，解析器还被迫等待资源下载。不关键于初始渲染的脚本应该被异步或推迟到第一次渲染之后。更多信息：解释异步和推迟 JavaScript 执行 - Tom O.

@jason，阻止未标记为异步的<script>标签的原因是它们可能会更改DOM，从而影响渲染结果。IE6经常会提前开始绘制，因此现代网站中会出现“跳跃”的情况。请注意，整个DOM都是从您访问的页面中读取的。Tommy所说的“DOM构建”已经在任何脚本运行之前完全构建好了。他的意思更多的是“DOM执行/解释”。另外，最好将CSS文件放在脚本之前，否则宽度/高度将不正确。 - Alexis Wilke

Answer 1

请按照以下步骤操作，您将清楚了解请求的生命周期以及响应是如何呈现的。

1. 在您喜欢的浏览器中输入URL地址。

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

3. 它形成一个HTTP请求（这很可能是所使用的协议）。

4. 为了到达主机，它首先需要将可读的主机名转换为IP地址，它通过对主机进行DNS查找来完成这个过程。

5. 然后需要从用户计算机到该IP地址打开一个套接字，指定端口（通常是80端口）。

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

7. 服务器检查请求（通常只有路径），并启动处理请求所需的服务器插件（与您使用的服务器语言相对应，PHP、Java、.NET、Python等）。

8. 插件可以访问完整的请求，并开始准备HTTP响应。

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

10. 从数据库中获取的数据与插件决定添加的其他信息结合成为一长串文本（可能是HTML）。

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

12. 浏览器接收响应并解析响应中的HTML（其中95%的概率是损坏的）。

13. DOM树是基于损坏的HTML构建的。

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

15. 返回步骤3，并为每个资源重复此过程。

样式表被解析，每个样式表中的渲染信息都会附加到DOM树中相应的节点上。

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

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

你在屏幕上看到了页面。

你因为整个过程太慢而感到烦恼。

- Subhash Chandra

---

浏览器在解析第一个HTML元素后立即开始渲染页面。它肯定不会等待DOM树完成，更不用说所有外部资源都加载完毕了。也许您可以编辑您的答案以澄清13-18步骤中至少有一些是以管道方式进行的（逐个元素？），而不是顺序执行的。 - max

Answer 2

Mozilla的David Baron做了一场非常棒的演讲，深入讲述了这个问题。视频名为《更快的HTML和CSS：Web开发者的布局引擎内部》，它向你展示了将DOM树渲染到屏幕的五个步骤:

1. 构建DOM
2. 计算样式
3. 构建渲染树
4. 计算布局
5. 绘制

- Chris Calo

Answer 3

我会尽力深入解释页面渲染过程。请注意，我不会重点关注请求-响应过程，因为提问者没有在问题中要求。

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

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

渲染引擎从网络层开始获取所请求文档的内容。通常以8KB块的方式进行。
将断开的响应构建为DOM树。
在HTML源代码中发现每个新资源（通常是图像、样式表和JavaScript文件）时，向服务器发出新请求。
此阶段浏览器标记文档为交互状态，并开始解析“deferred”模式下的脚本：即应在文档解析后执行的脚本。文档状态设置为“complete”，并触发“load”事件。
将每个CSS文件解析为StyleSheet对象，其中每个对象都包含具有选择器和对象对应的CSS语法的CSS规则。构建的树称为CSSOM。
在DOM和CSSOM之上创建了一个呈现树，它是要呈现的一组对象。每个呈现对象都包含其相应的DOM对象（或文本块）以及计算出的样式。换句话说，呈现树描述了DOM的视觉表示。
构建呈现树后，会经过“布局”处理。这意味着给每个节点分配它应该出现在屏幕上的确切坐标。
接下来是绘制 - 遍历呈现树，并使用UI后端层绘制每个节点。
当更改元素样式时不影响元素在页面上的位置（例如background-color、border-color、visibility）时，浏览器只需再次用新样式重新绘制元素（这意味着正在发生“重绘”或“重新设置样式”）。
当更改影响文档内容、结构或元素位置时，会发生回流（或重新布局）。

一个网页浏览器的内部结构是什么？
为了理解上述点中所解释的页面呈现过程，我们还需要了解网页浏览器的结构。

用户界面：用户界面包括地址栏、后退/前进按钮、书签菜单等。浏览器显示的除了您所请求的页面窗口以外的所有部分。
浏览器引擎：浏览器引擎在用户界面和渲染引擎之间进行操作协调。
渲染引擎：渲染引擎负责显示所请求的内容。例如，如果请求的内容是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

- Shwetabh Shekhar