在浏览器中描述页面呈现过程？

Question

首先，我对此问题所解决的整个请求 - 响应流程不感兴趣

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开发。

不幸的是，我没有找到解决此问题的任何网络资源。如果有资源可以解释这些概念，请原谅我。如果这个问题太难以回答，你可以指出资源（书籍等）。

Answer 1

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

1. 您可以在首选浏览器中的地址栏中输入网址。

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

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

4. 要联系主机，首先需要将人类可读主机转换为IP号码，并通过在主机上进行DNS查找来实现此目的

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

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并重复每个资源。

16. 解析样式表，并将每个样式中的呈现信息附加到DOM树中的匹配节点

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

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

19. 您会在屏幕上看到该页面

20. 你觉得整个过程太慢了。

Answer 2

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

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

Answer 3

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

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

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

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

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

用户界面：该用户界面包括地址栏，后退/前进按钮，书签菜单等。浏览器的每个部分都会显示，但您看到所请求页面的窗口除外。
浏览器引擎：浏览器引擎在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