拼多多面试 从输入URL到页面加载完成发生了什么？

从输入URL到页面加载完成，发生了一系列复杂的步骤，涉及到浏览器、DNS服务器、Web服务器等多个组件的协同工作。下面是详细的过程：

1. 用户输入URL并按下回车

用户在浏览器地址栏输入URL并按下回车。

2. 浏览器查找缓存

浏览器首先检查本地缓存中是否有该URL的资源，如果有且未过期，则直接从缓存中加载资源。

3. DNS解析

如果缓存中没有资源或资源已过期，浏览器需要将域名解析为IP地址：

1. 浏览器检查本地hosts文件，看是否有对应的IP地址。
2. 如果hosts文件中没有，浏览器向本地DNS服务器（通常由ISP提供）发送DNS查询请求。
3. 本地DNS服务器如果有缓存，则返回IP地址；如果没有，则逐级查询上级DNS服务器，直到根DNS服务器。
4. 最终获取到域名对应的IP地址，并返回给浏览器。

4. 建立TCP连接（三次握手）

浏览器通过获取到的IP地址，向服务器发起TCP连接，进行三次握手：

1. 客户端发送SYN包：
   • 客户端向服务器发送一个SYN（Synchronize）包，请求建立连接。这个包包含一个初始序列号（seq=x）。
   • 状态转换： 客户端从CLOSED状态转换为SYN-SENT状态。
2. 服务器返回SYN-ACK包：
   • 服务器接收到SYN包后，发送一个SYN-ACK包，表示同意连接请求。这个包包含服务器的初始序列号（seq=y）和对客户端SYN包的确认号（ack=x+1）。
   • 状态转换： 服务器从CLOSED状态转换为SYN-RECEIVED状态。
3. 客户端发送ACK包：
   • 客户端接收到SYN-ACK包后，发送一个ACK（Acknowledgment）包，确认连接建立。这个包包含客户端对服务器SYN包的确认号（ack=y+1）。
   • 状态转换： 客户端进入ESTABLISHED状态，服务器接收到ACK包后也进入ESTABLISHED状态。

5. 发送HTTP请求

TCP连接建立后，浏览器向服务器发送HTTP请求：

1. 请求行：包含请求方法（GET/POST）、URL和HTTP版本。
2. 请求头：包含浏览器类型、请求数据类型、授权信息等。
3. 请求体：对于POST请求，包含提交的数据。

6. 服务器处理请求并返回响应

服务器接收到HTTP请求后，进行处理并返回HTTP响应：

1. 响应行：包含HTTP版本和状态码（如200表示成功）。
2. 响应头：包含内容类型、日期、服务器信息等。
3. 响应体：包含请求的资源，如HTML文档、CSS、JS文件等。

7. 浏览器接收响应并处理

浏览器接收到服务器的响应后，开始处理和渲染页面：

1. 解析HTML：浏览器解析HTML文档，构建DOM树。
2. 解析CSS：浏览器解析CSS文件，生成CSSOM（CSS对象模型）。
3. 构建渲染树：结合DOM树和CSSOM，生成渲染树。
4. 布局和绘制：根据渲染树计算每个节点的位置和大小，进行布局和绘制。
5. 执行JavaScript：如果HTML中包含JS脚本，浏览器会解析并执行JS代码，可能会修改DOM或CSSOM，重新布局和绘制页面。

8. 关闭TCP连接（四次挥手）

当页面加载完成或连接超时，浏览器和服务器通过四次挥手关闭TCP连接：

1. 客户端发送FIN包：
   • 客户端向服务器发送一个FIN（Finish）包，请求关闭连接。这个包包含一个序列号（seq=u）。
   • 状态转换： 客户端从ESTABLISHED状态转换为FIN-WAIT-1状态。
2. 服务器返回ACK包：
   • 服务器接收到FIN包后，发送一个ACK包，确认已收到关闭请求。这个包包含对客户端FIN包的确认号（ack=u+1）。
   • 状态转换： 服务器从ESTABLISHED状态转换为CLOSE-WAIT状态，客户端接收到ACK包后从FIN-WAIT-1状态转换为FIN-WAIT-2状态。
3. 服务器发送FIN包：
   • 服务器发送一个FIN包，请求关闭连接。这个包包含一个序列号（seq=v）。
   • 状态转换： 服务器从CLOSE-WAIT状态转换为LAST-ACK状态。
4. 客户端返回ACK包：
   • 客户端接收到FIN包后，发送一个ACK包，确认已收到服务器的关闭请求。这个包包含对服务器FIN包的确认号（ack=v+1）。
   • 状态转换： 客户端从FIN-WAIT-2状态转换为TIME-WAIT状态，服务器接收到ACK包后进入CLOSED状态。客户端在经过一段时间（通常为2倍的MSL，最大报文段寿命）后进入CLOSED状态，完成连接关闭。

总结

流程图

从输入URL到页面加载完成，主要涉及以下步骤：

1. 用户输入URL并按下回车。
2. 浏览器查找缓存。
3. DNS解析获取IP地址。
4. 建立TCP连接（三次握手）。
5. 发送HTTP请求。
6. 服务器处理请求并返回响应。
7. 浏览器接收响应并处理（解析HTML、CSS、JS，构建DOM树和渲染树，布局和绘制页面）。
8. 关闭TCP连接（四次挥手）。

这些步骤协同工作，确保用户能够顺利访问和加载所需的网页内容。