DNS 解析全过程详解：从输入 URL 到页面渲染的技术链路

完整链路概览

当你在浏览器地址栏输入https://www.example.com并按下回车后，以下步骤依次发生：

  1. DNS域名解析（约20-120ms）
  2. TCP连接建立（三次握手）
  3. TLS安全连接建立（HTTPS）
  4. HTTP请求与响应
  5. 浏览器渲染页面

DNS 递归解析全过程

1. 浏览器DNS缓存

浏览器首先检查自身的DNS缓存。Chrome可通过chrome://net-internals/#dns查看。

2. 操作系统DNS缓存

# 查看Windows DNS缓存
ipconfig /displaydns
# 清除DNS缓存
ipconfig /flushdns

3. 本地DNS服务器

操作系统向配置的DNS服务器发起查询（通常由运营商提供，或使用8.8.8.8、1.1.1.1等公共DNS）。

4. 迭代查询过程

  1. 根域名服务器（.）→ 返回.com顶级域名服务器地址
  2. 顶级域名服务器（.com）→ 返回example.com权威DNS服务器地址
  3. 权威DNS服务器（example.com）→ 返回www.example.com的IP地址

DNS 记录类型

; A记录 — IPv4地址
www.example.com.    300    IN    A    93.184.216.34

; AAAA记录 — IPv6地址
www.example.com.    300    IN    AAAA  2606:2800:220:1:248:1893:25c8:1946

; CNAME记录 — 别名
blog.example.com.   300    IN    CNAME example.com.

; MX记录 — 邮件交换
example.com.        300    IN    MX    10 mail.example.com.

; TXT记录 — 文本信息（SPF、DKIM等）
example.com.        300    IN    TXT   "v=spf1 include:_spf.google.com ~all"

TCP 三次握手

客户端 → SYN → 服务器          （发起连接请求）
客户端 ← SYN+ACK ← 服务器      （确认并回发请求）
客户端 → ACK → 服务器          （确认连接建立）

TLS 握手

TLS 1.3握手只需1-RTT，相比TLS 1.2的2-RTT大幅减少了连接建立延迟。

HTTP 请求与响应

GET / HTTP/2
Host: www.example.com
Accept: text/html
Accept-Encoding: gzip, deflate, br

HTTP/2支持多路复用，所有资源可以在同一个TCP连接上并行传输。

浏览器渲染管线

  1. 解析HTML → 构建DOM树
  2. 解析CSS → 构建CSSOM树
  3. 合并 DOM + CSSOM → 渲染树
  4. 布局 → 计算元素位置和大小
  5. 绘制 → 将渲染树绘制到屏幕
  6. 合成 → GPU合成各层结果

DNS 优化技巧

<!-- DNS预解析 -->
<link rel="dns-prefetch" href="//cdn.example.com">

<!-- 预连接 -->
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
  • 使用CDN加速静态资源
  • 合理设置DNS TTL值
  • 使用HTTPDNS绕过运营商DNS劫持

总结

理解从URL到页面渲染的完整链路，有助于精准定位网站性能瓶颈。每个环节都有对应的优化手段，系统性地进行优化才能获得最佳的用户体验。