DNS 预解析优化网页加载速度

问题

什么是 DNS 预解析？如何通过 dns-prefetch 优化网页加载性能？

解答

DNS 预解析原理

dns-prefetch（DNS 预获取）是一种前端性能优化技术。它让浏览器提前解析页面中可能用到的域名，将解析结果缓存到系统中，从而缩短后续请求的 DNS 解析时间。

当浏览器访问一个域名时，DNS 解析按以下顺序查找缓存：

浏览器缓存 → 系统缓存 → 路由器缓存 → ISP DNS 缓存 → 根域名服务器 → 顶级域名服务器 → 主域名服务器

dns-prefetch 将解析后的 IP 缓存在系统中，使后续解析可以直接从系统缓存获取，跳过后面的查询步骤。

性能提升效果

• 首次解析并缓存后，下次解析时间可降至 0-1ms
• 从路由器缓存读取约需 15ms
• 从 ISP 缓存读取常见域名需 80-120ms，不常见域名需 200-300ms

dns-prefetch 可以带来 15-300ms 的性能提升，对于引用大量第三方资源的网站效果更明显。

基本用法

在 HTML 中添加 link 标签：

<link rel="dns-prefetch" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://api.example.com">

或通过 HTTP 响应头设置：

Link: <https://fonts.gstatic.com/>; rel=dns-prefetch

最佳实践

1. 仅用于跨域资源

不要对当前域名使用 dns-prefetch，因为浏览器已经解析过当前域名的 IP。

<!-- ❌ 错误：对当前域名使用 -->
<link rel="dns-prefetch" href="https://example.com">

<!-- ✅ 正确：对第三方域名使用 -->
<link rel="dns-prefetch" href="https://cdn.example.com">

2. 配合 preconnect 使用

对于关键资源，将 dns-prefetch 与 preconnect 配对使用。preconnect 会完成 DNS 解析、TCP 连接和 TLS 握手：

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="dns-prefetch" href="https://fonts.gstatic.com/">

3. 避免过度使用

过多的预解析会增加 DNS 查询负担。preconnect 仅用于最关键的连接，其他资源使用 dns-prefetch 即可。

浏览器 DNS 缓存

现代浏览器自带 DNS 缓存机制。例如 Chrome 的缓存时长为 1 分钟，且会在启动时自动解析最近访问的前 10 个域名。

dns-prefetch 在浏览器缓存之外，又在操作系统层面做了缓存，提供双重保障。系统缓存时间通常大于浏览器缓存，参考 DNS 服务器返回的 TTL 值（默认常为 3600 秒）。

关键点

• dns-prefetch 将域名解析结果缓存到系统，可减少 15-300ms 的 DNS 查询延迟
• 仅对跨域资源使用，避免对当前域名使用
• 关键资源配合 preconnect 使用，普通资源只用 dns-prefetch
• 避免过度使用，过多预解析会增加网络负担
• 系统 DNS 缓存时间通常长于浏览器缓存（1 分钟）