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

Question

首先,我对这个问题所解决的整个请求 - 响应过程不感兴趣

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

一旦它从服务器收到html响应,我想知道浏览器内部发生了什么.提出这个问题背后的意图是了解客户端脚本的内部细节.如果您能够在抽象概念中解释Web浏览器包含的内容,那将是有益的.您可以将它们称为CSS引擎,javascript引擎等.目标是精确地可视化我正在进行的Web开发.

不幸的是,我没有找到解决此问题的任何网络资源.如果有资源可以解释这些概念,请原谅我.如果这个问题过于详尽无法回答,您可以指向资源(书籍等).

Answer 1

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

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

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. 画