深入了解 Web 浏览器的工作原理

2023-04-02 14:28 作者:柴柴_前端教书匠 0人读过 | 我要投稿

浏览器现在已成为日常生活的一部分，但您有没有想过它们是如何工作的？

本文将仔细研究 Web 浏览器幕后的魔法。

1. Navigation

导航是加载网页的第一步。当用户在地址栏中输入 URL 或单击链接时，就会发生这种情况。

1.1. DNS查询

第一步是找到资源所在的IP地址。这是通过 DNS 查找完成的。

域名系统 (DNS) 服务器是专门用于将网站主机名（如 www.example.com ）与其相应的 Internet 协议或 IP 地址进行匹配的服务器。 DNS 服务器包含公共 IP 地址及其对应域名的数据库

例如，如果您访问 www.example.com ，DNS 服务器将返回 IP 地址 93.184.216.34 ，这是其对应的 IP 地址。

1.2. 3 次 TCP 握手

下一步是与服务器建立 TCP 连接。这是通过 3 次 TCP 握手完成的。

首先，客户端使用 SYN 数据包向服务器发送打开连接的请求。

服务器然后用 SYN-ACK 数据包响应以确认请求并请求客户端打开连接。

最后，客户端向服务器发送确认请求的 ACK 数据包。

1.3. TLS 握手

如果网站使用 HTTPS（加密的 HTTP 协议），下一步就是通过 TLS 握手建立 TLS 连接。

在此步骤中，浏览器和服务器之间会交换更多消息。

客户端问服务器：浏览器向服务器发送一条消息，其中包括它支持的 TLS 版本和密码套件以及称为客户端随机的随机字节字符串。
服务器问候消息和证书：服务器发回一条消息，其中包含服务器的 SSL 证书、服务器选择的密码套件和服务器随机数（由服务器生成的随机字节串）。
身份验证：浏览器通过颁发它的证书颁发机构验证服务器的 SSL 证书。这样浏览器就可以确定服务器是它所说的那个人。
premaster secret：浏览器再发送一个称为 premaster secret 的随机字节串，它使用浏览器从服务器的 SSL 证书中获取的公钥加密。 premaster secret 只能由服务器用私钥解密。
使用私钥：服务器解密预主密钥。
创建会话密钥：浏览器和服务器从客户端随机数、服务器随机数和预主密钥生成会话密钥。
客户端完成：浏览器向服务器发送一条消息，说明它已完成。
服务器完成：服务器向浏览器发送一条消息，说明它也已完成。
实现安全对称加密：握手完成，可以使用会话密钥继续通信。

完成上述步骤，现在可以开始从服务器请求和接收数据了。

2. 获取资源

TCP连接建立后，浏览器就可以开始从服务器获取资源了。

2.1. HTTP 请求

如果我们没有任何 Web 开发经验，就会遇到 HTTP 请求的概念。

HTTP 请求用于从服务器获取资源。它需要一个 URL 和要处理的请求类型（GET、POST、PUT、DELETE）。浏览器还会向请求添加一些额外的标头以提供额外的上下文。

发送到服务器的第一个请求通常是获取 HTML 文件的 GET 请求。

2.2. HTTP 响应

然后，服务器针对给定的请求以适当的 HTTP 响应进行响应。

响应包含状态代码、标头和正文。

3. 解析HTML

现在是主要部分。浏览器收到 HTML 文件后，对其进行解析以生成 DOM（文档对象模型）树。

这是由作为浏览器核心的浏览器引擎完成的（例如：Firefox 的 Gecko、Safari 的 Webkit、Chrome 的 Blink 等）。

这是一个示例 HTML 文件：

3.1. Tokenization

显示网页的第一步是标记化 HTML 文件。标记化是将一串字符分解为对浏览器有意义的块（称为标记）的过程。

Tokens 是 DOM 树的基本构建块。

3.2. 构造DOM树

Lexing 是将一系列标记转换为称为 DOM 树的树结构的过程。

DOM 树是一种树状数据结构，表示 HTML 文档中的节点。

注意：如果页面需要任何外部资源，将按如下方式处理

非阻塞资源是并行获取的。例如：图像。
延迟资源是并行获取的，但在构建 DOM 树后执行。例如：带有 defer 属性和 CSS 文件的脚本。
阻塞资源是按顺序获取和执行的。例如： script 没有 defer 属性。

4. 解析CSS

DOM树构建完成后，浏览器解析CSS文件，生成CSSOM（CSS Object Model）。

这个过程类似于使用标记化和 CSSOM 生成的 DOM 树构造

5. 执行 JavaScript

如前所述，如果页面需要阻塞 script ，它将被立即获取并执行，同时 DOM 树构建暂停，否则 script 将在 DOM 树构建完成后获取并执行。

无论 script 何时执行，它都将由 JavaScript 引擎处理，这与浏览器引擎一样因浏览器而异。

5.1.即时编译

假设您熟悉解释器和编译器的概念，JavaScript 引擎使用一种称为 JIT（即时）编译的混合方法。

JIT 即 Just In Time，意思是不同于编译语言，例如 C，编译是提前完成的（换句话说，在代码的实际执行之前），对于 JavaScript，编译是在执行期间完成的

6. Rendering（渲染）

终于到了渲染页面的时候了。浏览器使用 DOM 树和 CSSOM 来渲染页面。

6.1. Render tree construction

第一步是构建渲染树。呈现树是 DOM 树的子集，它只包含页面上可见的元素。

6.2. Layout

下一步是布局渲染树。这是通过计算渲染树中每个元素的确切大小和位置来完成的。

每当我们更改 DOM 中影响页面布局的某些内容时，甚至部分更改，都会发生此步骤。

重新计算元素位置的情况示例有：

从 DOM 中添加或删除元素
调整浏览器窗口大小
更改元素的 width 、 height 或 position

6.3. Painting

最后，浏览器决定哪些节点需要可见并计算它们在视口中的位置，是时候在屏幕上绘制它们（渲染像素）了。这个阶段也被称为光栅化阶段，浏览器将在布局阶段计算的每个元素转换为屏幕上的实际像素。

就像布局阶段一样，每次我们更改 DOM 中元素的外观时都会发生此阶段，即使是部分更改也是如此。