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

使用 dns-prefetch 提前解析域名，减少 DNS 查询延迟

问题

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

DNS 解析通常需要 20-120ms，优化可以从两方面入手：减少 DNS 请求次数和缩短 DNS 解析时间。

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

浏览器向第三方服务器发送请求时，必须先通过 DNS 解析将域名转换为 IP 地址。如果短时间内有多个请求发往同一服务器，DNS 解析会重复触发，造成页面加载延迟。DNS 解析虽然占用带宽不大，但延迟较高，在移动网络上尤为明显。

在 HTML 中添加 link 标签：

<link rel="dns-prefetch" href="https://baidu.com/">

或通过 HTTP 响应头设置：

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

DNS 解析按以下顺序查找缓存：

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

dns-prefetch 将解析后的 IP 缓存在系统中。当浏览器首次解析域名并缓存到操作系统后，下次 DNS 解析时间可降至 0-1ms。如果不缓存在系统，需要读取路由器缓存（约 15ms）或 ISP 缓存（常见域名 80-120ms，不常见域名 200-300ms）。

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

现代浏览器自带 DNS 缓存机制。Chrome 的缓存过期时间是 1 分钟，在此期间不会重新请求 DNS。Chrome 启动时会自动解析上次启动时记录的前 10 个域名，因此常访问的网站打开速度更快。

dns-prefetch 相当于在浏览器缓存之后，在操作系统层面再做一层 DNS 缓存，为浏览器缓存提供保障。系统 DNS 缓存时间通常大于浏览器。

TTL（Time-To-Live）是域名解析记录在 DNS 服务器中的存留时间。浏览器 DNS 缓存时间与 DNS 服务器返回的 TTL 值无关，取决于浏览器自身设置。系统缓存会参考 TTL 值，但不完全等于 TTL 值。很多平台的默认 TTL 值是 3600 秒（1 小时）。

dns-prefetch 的主要缺点是过度使用。过多的预获取会导致过量 DNS 解析，增加网络负担。

仅用于跨域域名：dns-prefetch 仅对跨域 DNS 查找有效，不要用于同域，因为浏览器看到提示时，当前域名的 IP 已经被解析。

配合 preconnect 使用：dns-prefetch 仅执行 DNS 查找，而 preconnect 会建立完整连接。对于 HTTPS 站点，组合使用可以涵盖 DNS 解析、TCP 连接和 TLS 握手，进一步减少延迟：

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

避免过度使用 preconnect：如果需要连接多个第三方域，全部使用 preconnect 会适得其反。preconnect 应仅用于最关键的连接，其他连接使用 dns-prefetch 即可。