从输入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连接（四次挥手）。 这些步骤协同工作，确保用户能够顺利访问和加载所需的网页内容。