DNS 预解析优化网页加载速度
使用 dns-prefetch 提前解析域名，减少 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 分钟）
目录