从输入网址到页面显示的全过程

从输入网址到页面显示的全过程

这是理解 Web 技术核心的基石，这个过程涉及多个技术和协议的协同工作。

总览核心过程

1. URL 解析：浏览器解析网址，确定协议、域名、资源路径
2. DNS 查询：将域名转换为服务器的 IP 地址
3. 建立 TCP 连接：与服务器通过「三次握手」建立可靠连接
4. 发送 HTTP 请求：浏览器向服务器发送一个 HTTP 请求报文
5. 服务器处理请求并返回 HTTP 响应：服务器处理请求，并返回包含状态码和请求数据的响应报文
6. 浏览器解析并渲染页面：浏览器接收响应，解析 HTML、CSS、JavaScript，并最终渲染出页面
7. 连接终止：通过「四次挥手」关闭 TCP 连接（对于 HTTP/1.1 默认持久连接，会在传输完成后或超时后关闭）

---

详细分步解析

阶段一：URL 解析

当你在地址栏输入 https://www.example.com/index.html 并按下回车后，浏览器会：

• 分解 URL：
  • 协议：https → 使用 HTTPS 协议，需要加密和身份验证
  • 域名：www.example.com → 需要找到这个服务器的地址
  • 端口：未指定，使用默认端口（HTTPS 为 443，HTTP 为 80）
  • 路径：/index.html → 要请求服务器上的哪个资源
• 检查 HSTS 预加载列表：浏览器会检查该站点是否在 HSTS 列表中，如果是，即使你输入 http://，也会强制使用 https:// 访问
• 检查缓存：浏览器可能会检查本地缓存（如 DNS 缓存、资源缓存），如果缓存有效且新鲜，可能会直接使用缓存内容，跳过后续网络请求

阶段二：DNS 查询（域名解析）

浏览器不知道 www.example.com 在哪里，它需要知道其对应的 IP 地址（如 93.184.216.34）。这个过程是：

1. 浏览器缓存：浏览器查看自己的缓存中是否有该域名的 IP
2. 操作系统缓存：如果浏览器缓存没有，会去查询操作系统的 hosts 文件和 DNS 解析器缓存
3. 路由器缓存：请求会发送到路由器，路由器可能有自己的缓存
4. ISP DNS 服务器：如果以上都没有，计算机会向互联网服务提供商（ISP）的 DNS 服务器发起查询请求
5. 递归/迭代查询：
   • 本地 DNS 服务器会从 根域名服务器（.）开始查询
   • 根服务器告知应去查询 .com 顶级域名服务器（TLD）
   • TLD 服务器告知应去查询该域名的 权威域名服务器
   • 权威域名服务器返回 www.example.com 的准确 IP 地址
6. 本地 DNS 服务器将 IP 返回给操作系统，并缓存起来。操作系统再将其返回给浏览器，并缓存起来

注意：DNS 查询本身可能使用 UDP 协议，以减少开销。

阶段三：建立 TCP 连接（三次握手）

拿到 IP 地址后，浏览器需要通过 TCP 与服务器建立一个可靠的连接。因为 HTTPS 使用了 TLS/SSL 加密，所以这个过程稍复杂：

1. TCP 三次握手：
   • SYN：浏览器向服务器发送一个 SYN 包（序列号 = x），请求建立连接
   • SYN-ACK：服务器收到后，回复一个 SYN-ACK 包（序列号 = y，确认号 = x+1）
   • ACK：浏览器再回复一个 ACK 包（确认号 = y+1）。至此，TCP 连接建立成功
2. TLS 握手（仅 HTTPS）：
   • Client Hello：浏览器向服务器发送支持的 TLS 版本、加密套件列表和一个随机数
   • Server Hello：服务器选择 TLS 版本和加密套件，并发送自己的数字证书和一个随机数
   • 验证证书：浏览器验证服务器证书的合法性（是否由可信机构颁发、域名是否匹配、是否过期）
   • Premaster Secret：浏览器用证书中的公钥加密一个「预主密钥」发送给服务器
   • 生成会话密钥：服务器用私钥解密出「预主密钥」，然后双方利用三个随机数（客户端、服务端、预主密钥）生成相同的对称会话密钥
   • 加密通信：后续的 HTTP 通信都将使用这个对称密钥进行加密解密

阶段四：发送 HTTP 请求

连接建立后，浏览器会组装一个 HTTP 请求报文，并通过连接发送给服务器。报文主要包括：

• 请求行：方法（GET, POST 等）、URL 路径、HTTP 版本
  • 例如：GET /index.html HTTP/1.1
• 请求头：包含元数据，如：
  • Host: www.example.com
  • User-Agent：浏览器身份标识
  • Accept：能接收的响应数据类型（如 text/html, image/png）
  • Cookie：本地存储的该站点的用户信息
  • Connection: keep-alive（表示希望保持连接）
• 请求体：对于 POST 等方法，会包含发送给服务器的数据（如表单数据）

阶段五：服务器处理并返回 HTTP 响应

服务器接收到请求后，会进行处理：

1. 处理请求：Web 服务器软件（如 Nginx, Apache）将请求转发给相应的后端应用（如 PHP, Python, Node.js）。应用处理业务逻辑，可能查询数据库，最终生成一个 HTTP 响应
2. 返回响应：服务器发回一个 HTTP 响应报文，包括：
   • 状态行：HTTP 版本、状态码和状态信息
     • 例如：HTTP/1.1 200 OK（成功）或 404 Not Found（未找到）
   • 响应头：包含响应的元数据，如：
     • Content-Type: text/html; charset=UTF-8（响应体的数据类型）
     • Content-Length（响应体的大小）
     • Set-Cookie（指示浏览器设置 Cookie）
     • Cache-Control（指示浏览器如何缓存该资源）
   • 响应体：实际请求的数据，通常是 HTML 文档内容

阶段六：浏览器解析和渲染页面

这是最复杂的一步。浏览器拿到 HTML 文档后：

1. 构建 DOM 树：
   • 浏览器解析 HTML，将标签转换为 DOM（文档对象模型）树中的节点
2. 构建 CSSOM 树：
   • 同时，浏览器解析外部 CSS 文件和内联样式，构建 CSSOM（CSS 对象模型）树，它描述了各个节点的样式规则
3. 执行 JavaScript：
   • 在解析过程中，如果遇到 <script> 标签，会暂停 HTML 解析，立即加载并执行 JavaScript 代码（除非标记为 async 或 defer）。JS 可以修改 DOM 和 CSSOM
4. 构建渲染树：
   • 将 DOM 树和 CSSOM 树合并，生成渲染树。渲染树只包含可见的节点（不包括 head, display: none 的元素）
5. 布局：
   • 计算渲染树中每个节点的确切位置和大小（又称「重排」）
6. 绘制：
   • 将布局计算后的每个节点转换为屏幕上的实际像素（又称「重绘」）。这包括绘制文本、颜色、图像、边框等
7. 合成：
   • 将页面的不同层（如可能由 GPU 加速的元素）合并到一起，最终显示在屏幕上

注意：为了优化性能，浏览器会尝试尽可能早地将内容显示出来，因此我们常会看到页面逐步加载的现象。

阶段七：连接终止

当页面和所有资源都加载完成后，TCP 连接不会立即关闭。在 HTTP/1.1 中，默认使用持久连接，允许在同一个连接上发送多个请求。连接会保持一段时间，如果在此期间有新的请求，可以复用这个连接，避免了重复握手开销。最终，当连接空闲超时后，会通过 TCP 四次挥手 来优雅地关闭连接。

---

流程图

graph TDA[输入 URL] --> B[URL 解析]B --> C[DNS 查询]C --> D[建立 TCP 连接]D --> E[发送 HTTP/HTTPS 请求]E --> F[服务器处理并返回响应]F --> G{状态码?}G -- 200 OK --> H[浏览器解析渲染]G -- 301/302 --> C[重定向 DNS]G -- 404/500 --> I[错误处理]H --> J[显示页面]subgraph H [浏览器渲染]H1[构建 DOM 树] --> H2[构建 CSSOM 树]H2 --> H3[执行 JavaScript]H3 --> H4[构建渲染树]H4 --> H5[布局]H5 --> H6[绘制]H6 --> H7[合成显示]end