12-从URL到页面：探寻Web页面渲染的全过程

从URL到页面：探寻Web页面渲染的全过程

笔记+分享
在我们浏览网页时，从输入URL到最终页面呈现在浏览器上，这背后发生了一系列复杂的步骤。本文将详细介绍这个过程，包括TCP连接的建立与终止。

1. DNS解析

当你在浏览器中输入一个URL（例如www.example.com）并按下回车，第一步是DNS解析。浏览器将域名发送给DNS服务器，以获取对应的IP地址。这个过程如下：

1. 浏览器检查本地缓存是否已有该域名的IP地址。
2. 系统DNS缓存-路由器DNS缓存-网络运营商缓存
3. 如果还没有，浏览器向DNS递归解析器发送请求。
4. 递归解析器向根DNS服务器请求顶级域名服务器的位置（如.com服务器）。
5. 递归解析器向顶级域名服务器请求权威DNS服务器的位置（存储example.com的服务器）。
6. 递归解析器向权威DNS服务器请求example.com的IP地址。
7. 权威DNS服务器返回IP地址给递归解析器，递归解析器再将IP地址返回给浏览器。

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

得到IP地址后，浏览器与服务器建立TCP连接，确保数据可以可靠传输。建立过程如下：

1. SYN：浏览器向服务器发送一个SYN（同步）包，请求建立连接。
   • 第一次握手，由浏览器发起，告诉服务器我要发送请求了
2. SYN-ACK：服务器回应一个SYN-ACK（同步-确认）包，表示同意连接。
   • 第二次握手，由服务器发起，告诉浏览器我准备接受了，你赶紧发送吧。
3. ACK：浏览器再发送一个ACK（确认）包，连接建立。
   • 第三次握手，由浏览器发送，告诉服务器，我马上就发了，准备接受吧

3. 发送HTTP请求

TCP连接建立后，浏览器向服务器发送一个HTTP请求。这通常是一个GET请求，要求服务器发送所请求的资源（如HTML文件）。

4. 服务器处理请求

服务器接收到HTTP请求后，处理请求并生成响应。服务器可能需要查询数据库、执行后台脚本或访问其他服务，然后将响应数据（如HTML、CSS、JavaScript、图像等）发送回浏览器。

5. 浏览器接收响应并开始处理

浏览器接收到服务器的HTTP响应后，开始解析响应内容：

1. 解析HTML：浏览器解析HTML内容，构建DOM（Document Object Model）树。
2. 请求资源：在解析HTML时，遇到外部资源（如CSS、JavaScript文件、图像等）的引用，浏览器会并行地发起请求获取这些资源。
3. 解析CSS：获取到CSS文件后，浏览器解析CSS，生成CSSOM（CSS Object Model）树。
4. 执行JavaScript：浏览器解析并执行JavaScript代码，JavaScript可能会修改DOM树或CSSOM树。

6. 页面布局和绘制

1. 生成渲染树：浏览器将DOM树和CSSOM树结合生成渲染树。
2. 布局（Layout）：浏览器计算每个节点的几何信息（位置和大小）。
3. 绘制（Paint）：浏览器将渲染树的各个节点绘制到屏幕上。

7. TCP连接的终止（四次挥手）

当所有数据传输完成后，需要终止TCP连接，以释放资源。过程如下：

1. 第一次挥手（FIN）：主动关闭方（如浏览器）发送一个FIN（Finish）包，表示数据发送完毕。
   • 由浏览器发送的，发送给服务器，我东西发送完了（请求报文），你准备关闭吧
2. 第二次挥手（ACK）：被动关闭方（如服务器）收到FIN包后，发送一个ACK包确认。
   • 由服务器发起的，告诉浏览器，我东西接受完了（请求报文），我准备关闭了，你也准备吧
3. 第三次挥手（FIN）：被动关闭方发送一个FIN包，表示数据发送完毕。
   • 由服务器发起，告诉浏览器，我东西发完了（响应报文），你准备关闭吧
4. 第四次挥手（ACK）：主动关闭方收到FIN包后，发送一个ACK包确认，并等待一定时间（通常是2倍的MSL，最大报文段生存时间）后关闭连接。
   • 由浏览器发起，告诉服务器，我东西接受完了，我准备关闭了（响应报文），你也准备吧

浏览器的优化与缓存

现代浏览器和服务器会进行各种优化，以提高页面加载速度和用户体验：

• 文件压缩：使用Gzip等方法压缩文件传输。
• 缓存：利用浏览器缓存、HTTP缓存或Service Worker缓存，减少重复请求。
• CDN（内容分发网络）：通过CDN分布式地存储和传输资源，缩短请求时间。

结论

从输入URL到页面完全渲染，背后涉及的步骤非常多，包括DNS解析、TCP连接的建立与终止、HTTP请求与响应处理、DOM和CSSOM树的构建、JavaScript的执行以及页面的布局和绘制。了解这些步骤，有助于我们更好地优化网页性能，提高用户体验。