从 URL 到渲染页面的完整旅程

你在浏览器地址栏中输入一个 URL 并按下回车。在快速连接下，页面在不到一秒内就出现了。但在这不到一秒的时间里，你的浏览器执行了数量惊人的操作。

本文将带你走过从输入 https://example.com 到看到渲染页面的整个过程，跨越网络栈的每一层。当你访问 IP 确认时，完全相同的过程在幕后运行。

步骤 1：解析 URL

浏览器首先解析输入的字符串。

  • 协议：https:// → 使用 HTTPS (端口 443)
  • 域名：example.com → 需要通过 DNS 解析为 IP 地址
  • 路径：/ (省略时为根) → 从服务器请求的资源

如果输入被判定为搜索查询而非 URL，浏览器会重定向到默认搜索引擎。

步骤 2：DNS 解析 - 将域名转换为 IP 地址

浏览器需要知道 example.com 的 IP 地址。DNS 解析按以下顺序尝试。

  1. 浏览器缓存：浏览器记住最近访问过的域名的 IP 地址
  2. 操作系统缓存：如果浏览器中没有，检查操作系统 DNS 缓存
  3. hosts 文件：检查 /etc/hosts (Unix) 或 C:\Windows\System32\drivers\etc\hosts (Windows)
  4. DNS 解析器：如果以上都没有，向配置的 DNS 服务器 (ISP 默认，或 Cloudflare 1.1.1.1 等) 发送查询

DNS 解析器按层级查询，根服务器 → .com TLD 服务器 → example.com 的权威服务器，最终获取 IP 地址 (例如 93.184.216.34)。此过程通常需要 10-100 毫秒。了解 DNS 漏洞有助于你理解此阶段的风险。

步骤 3：建立 TCP 连接 - 三次握手

获得 IP 地址后，浏览器与服务器的端口 443 建立 TCP 连接。进行 TCP 三次握手。

  1. SYN：客户端 → 服务器："我想连接"
  2. SYN-ACK：服务器 → 客户端："收到，我也准备好了"
  3. ACK：客户端 → 服务器："确认，开始通信"

这 3 次交换消耗 1 个 RTT (往返时间)。从东京到洛杉矶的服务器，大约是 100 毫秒。你可以用 traceroute 观察到的延迟直接影响这一步。

步骤 4：TLS 握手 - 建立加密通信

对于 HTTPS，在 TCP 连接之上构建 TLS 加密层。在 TLS 1.3 中，发生以下过程。

  1. ClientHello：客户端发送支持的密码套件、TLS 版本和随机值
  2. ServerHello：服务器选择密码套件并发送其 TLS 证书
  3. 证书验证：浏览器验证证书的有效性 (CA 可信度、过期日期、域名匹配)
  4. 密钥交换：通过 Diffie-Hellman 密钥交换生成共享加密密钥

TLS 1.3 优化了握手，在 1 个 RTT 内完成 (TLS 1.2 需要 2 个 RTT)。对于重新连接到之前访问过的服务器，0-RTT (零往返) 是可能的。

步骤 5：发送 HTTP 请求

加密连接建立后，浏览器发送 HTTP 请求。

GET / HTTP/2
Host: example.com
User-Agent: Mozilla/5.0 ...
Accept: text/html
Accept-Language: ja,en
Accept-Encoding: gzip, br

此请求包含浏览器类型、可接受的内容格式、语言设置和 Cookie 等信息。

步骤 6：服务器处理和响应

服务器接收请求并返回 HTML。静态网站直接提供文件，而动态网站由应用服务器查询数据库生成 HTML。

响应包含 HTTP 状态码 (200 OK、301 重定向、404 未找到等) 和安全头。

步骤 7：渲染 - 从 HTML 到像素

即使浏览器收到了 HTML，在页面显示之前还需要多个处理步骤。

  1. HTML 解析：将 HTML 转换为 DOM (文档对象模型) 树
  2. CSS 解析：将 CSS 转换为 CSSOM (CSS 对象模型)
  3. 渲染树构建：组合 DOM 和 CSSOM 构建要在屏幕上显示的元素树
  4. 布局：计算每个元素的位置和大小
  5. 绘制：将每个元素转换为像素并绘制到屏幕上

在此过程中，如果需要额外的资源 (CSS、JavaScript、图片、字体)，DNS 解析 → TCP 连接 → TLS 握手 → HTTP 请求的循环会为每个资源重复 (HTTP/2 对同一域名的连接进行多路复用，提高效率)。

总结 - 不到一秒内的技术结晶

从输入 URL 到看到渲染页面的旅程几乎跨越了所有主要的互联网技术：DNS、TCP、TLS、HTTP 和 HTML/CSS 渲染。本文涵盖的每个步骤都是一个独立的技术领域，有着自己深厚的历史和设计理念。

当你访问 IP 确认时，试着打开浏览器的开发者工具 (F12) 并查看"Network"标签。你会看到每个阶段，DNS 解析、TCP 连接、TLS 握手和 HTTP 请求，所花费的时间被可视化。

本文相关术语

DNS 在步骤 2 中将域名转换为 IP 地址的系统。 HTTPS 通过步骤 4 中的 TLS 握手建立的加密通信。 IP 地址 DNS 解析结果获得的服务器数字地址。 TLS 在步骤 4 中建立加密通信的协议。TLS 1.3 在 1 个 RTT 内完成。 HTTP 浏览器在步骤 5 中用于从服务器请求资源的协议。