网络

从输入URL到页面加载完成，中间发生了什么？尽量说的详细

1. URL解析：

   • 用户在浏览器地址栏中输入URL并按下回车键。
   • 浏览器解析URL，提取协议（如HTTP或HTTPS）、域名、路径等信息。

2. DNS寻址：

   • 浏览器检查本地缓存是否有该域名的IP地址。
   • 如果没有，浏览器向DNS服务器发送查询请求，获取域名对应的IP地址。

3. 建立TCP连接：

   • 浏览器使用IP地址和服务器建立TCP连接，通常通过三次握手完成。

4. 发送HTTP请求：

   • 浏览器构建HTTP请求报文，包括请求方法（如GET）、请求头等信息。
   • 浏览器通过TCP连接将HTTP请求发送到服务器。

5. 服务器处理请求：

   • 服务器接收到HTTP请求后，处理请求并生成响应。
   • 服务器将响应数据（如HTML、CSS、JavaScript、图片等）通过HTTP响应报文返回给浏览器。

6. 接收HTTP响应：

   • 浏览器接收到服务器的HTTP响应报文。
   • 浏览器检查响应状态码（如200表示成功，404表示未找到等）。

7. 解析HTML：

   • 浏览器开始解析HTML文档，构建DOM树。
   • 遇到外部资源（如CSS、JavaScript、图片等）时，浏览器会发送新的HTTP请求获取这些资源。

8. 解析CSS：

   • 浏览器解析CSS文件，构建CSSOM（CSS对象模型）。
   • 将CSSOM与DOM树结合，生成渲染树。

9. 执行JavaScript：

   • 浏览器解析并执行JavaScript代码。
   • JavaScript可能会修改DOM树或CSSOM，触发重新渲染。

10. 布局和绘制：

    • 浏览器根据渲染树计算每个元素的布局（位置和大小）。
    • 浏览器将元素绘制到屏幕上。

11. 加载完成：

    • 当所有资源加载完毕并渲染到屏幕上时，页面加载完成。
    • 浏览器触发DOMContentLoaded事件和load事件。