当面试被问到web浏览器的工作原理你怎么办？

不知名前端选手
141 阅读6分钟

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

Navigation

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

DNS查询

  • 第一步是找到资源所在的IP地址。这是通过 DNS 查找完成的。
  • 域名系统 (DNS) 服务器是专门用于将网站主机名（如 www.example.com ）与其相应的 Internet 协议或 IP 地址进行匹配的服务器。 DNS 服务器包含公共 IP 地址及其对应域名的数据库
  • 例如，如果您访问 www.example.com ，DNS 服务器将返回 IP 地址 93.184.216.34 ，这是其对应的 IP 地址。

3次TCP握手

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

  • 首先,客户端使用SYN数据包向服务器发送打开连接的请求
  • 服务器然后用SYN-ACK数据包响应以确认请求并请求客户端打开连接
  • 最后，客户端向服务器发送确认请求的ACK数据包

TLS握手

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

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

1.客户端问服务器：浏览器向服务器发送一条消息，其中包括它支持的 TLS 版本和密码套件以及称为客户端随机的随机字节字符串。

2.服务器问候消息和证书：服务器发回一条消息，其中包含服务器的 SSL 证书、服务器选择的密码套件和服务器随机数（由服务器生成的随机字节串）。

3.身份验证：浏览器通过颁发它的证书颁发机构验证服务器的 SSL 证书。这样浏览器就可以确定服务器是它所说的那个人。

4.premaster secret：浏览器再发送一个称为 premaster secret 的随机字节串，它使用浏览器从服务器的 SSL 证书中获取的公钥加密。 premaster secret 只能由服务器用私钥解密。

5.使用私钥：服务器解密预主密钥。

6.创建会话密钥：浏览器和服务器从客户端随机数、服务器随机数和预主密钥生成会话密钥。

7.客户端完成：浏览器向服务器发送一条消息，说明它已完成。

8.服务器完成：服务器向浏览器发送一条消息，说明它也已完成。

9.实现安全对称加密：握手完成，可以使用会话密钥继续通信。

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

获取资源

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

img

HTTP请求

  • 如果我们没有任何 Web 开发经验，就会遇到 HTTP 请求的概念
  • HTTP 请求用于从服务器获取资源。它需要一个 URL 和要处理的请求类型（GET、POST、PUT、DELETE）。浏览器还会向请求添加一些额外的标头以提供额外的上下文
  • 发送到服务器的第一个请求通常是获取 HTML 文件的 GET 请求

HTTP响应

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

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

解析HTML

  • 现在是主要部分。浏览器收到 HTML 文件后，对其进行解析以生成 DOM（文档对象模型）树
  • 这是由作为浏览器核心的浏览器引擎完成的（例如：Firefox 的 Gecko、Safari 的 Webkit、Chrome 的 Blink 等）

img

Tokenization

  • 显示网页的第一步是标记化 HTML 文件。Token化是将一串字符分解为对浏览器有意义的块的过程
  • Tokens 是 DOM 树的基本构建块

img

构造DOM树

  • Lexing 是将一系列标记转换为称为 DOM 树的树结构的过程
  • DOM 树是一种树状数据结构，表示 HTML 文档中的节点

img

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

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

解析CSS

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

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

执行JavaScript

  • 如前所述，如果页面需要阻塞 script ，它将被立即获取并执行，同时 DOM 树构建暂停，否则 script 将在 DOM 树构建完成后获取并执行
  • 无论 script 何时执行，它都将由 JavaScript 引擎处理，这与浏览器引擎一样因浏览器而异

即使编译

img

img

  • 假设您熟悉解释器和编译器的概念，JavaScript 引擎使用一种称为 JIT（即时）编译的混合方法
  • IT 即 Just In Time，意思是不同于编译语言，例如 C，编译是提前完成的（换句话说，在代码的实际执行之前），对于 JavaScript，编译是在执行期间完成的

img

Rendering(渲染)

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

img

Render tree construction

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

Layout

  • 下一步是布局渲染树。这是通过计算渲染树中每个元素的确切大小和位置来完成的
  • 每当我们更改 DOM 中影响页面布局的某些内容时，甚至部分更改，都会发生此步骤
  • 重新计算元素位置的情况示例有:

1.从DOM中添加或删除元素

2.调整浏览器窗口大小

3.更改元素的width、height或position

Painting

  • 最后，浏览器决定哪些节点需要可见并计算它们在视口中的位置，是时候在屏幕上绘制它们（渲染像素）了。这个阶段也被称为光栅化阶段，浏览器将在布局阶段计算的每个元素转换为屏幕上的实际像素
  • 就像布局阶段一样，每次我们更改 DOM 中元素的外观时都会发生此阶段，即使是部分更改也是如此
  • 重新计算元素位置的情况示例有:

1.更改元素的outline

2.更改元素的opacity或visibility

3.更改元素的background color

Layering & Compositing

img

  • 最后一步是合成图层。这是由浏览器完成的，以优化渲染过程
  • 合成是一种将页面的各个部分分成层的技术，分别绘制它们并在称为合成器线程的单独线程中合成为页面。当文档的各个部分绘制在不同的层中并相互重叠时，合成是必要的，以确保它们以正确的顺序绘制到屏幕上并正确呈现内容
注意：DOM 更新，特别是布局和绘制，是非常昂贵的操作，在低端设备上可以明显注意到。因此，尽量减少触发次数很重要
avatar
文章
阅读
粉丝