鸭梨公共文档

主题

DNS 预解析（DNS Prefetch）的作用 ​

DNS 预解析（DNS Prefetch） 的作用是 提前解析域名，减少 DNS 解析的延迟，提高网页加载速度。

具体作用 ​

  1. 减少 DNS 解析时间

    • 正常情况下，当用户访问某个 URL（如 https://example.com/resource）时，浏览器需要先解析 example.com 这个域名，对应得到 IP 地址。这通常需要 20-120ms，甚至更长（取决于网络状况和 DNS 服务器）。
    • 通过 DNS Prefetch，浏览器可以在用户访问该资源之前就预先解析该域名，减少访问该资源时的等待时间。

  2. 提升用户感知速度

    • 页面上可能包含多个外部资源（CDN 资源、API 请求、广告服务器等）。
    • 预解析这些域名后，当用户访问这些资源时，就不需要额外的解析步骤，使页面加载体验更流畅。

  3. 适用于跨域资源

    • 适用于加载外部域名上的资源，如：
      • CDN 资源（如 https://cdn.example.com）
      • 第三方 API（如 https://api.example.com）
      • 广告网络（如 https://ads.example.com）

使用方法 ​

  1. HTML 方式 在 <head> 标签中添加以下代码：

    html
    <link rel="dns-prefetch" href="//example.com">
<link rel="dns-prefetch" href="//cdn.example.com">

    说明：

    • rel="dns-prefetch" 指示浏览器提前解析 DNS。
    • href="//example.com" 代表要预解析的域名（双斜杠 // 使其适配 HTTP 和 HTTPS）。

  2. HTTP 头部 在服务器的 HTTP 头部中添加：

    http
    Link: <//example.com>; rel=dns-prefetch

  3. JavaScript 方式（一般不推荐）

    javascript
    var link = document.createElement("link");
link.rel = "dns-prefetch";
link.href = "//example.com";
document.head.appendChild(link);

    这一方法适用于动态添加预解析记录，但通常 HTML 方式已经足够。

DNS Prefetch 与其他预加载技术的对比 ​

方式作用适用场景
DNS Prefetch预解析域名域名提前解析，降低 DNS 解析延迟
Preconnect建立早期连接（DNS + TCP + TLS）需要访问远程资源，包含 TCP 连接优化
Prefetch预加载资源适用于预测用户会访问的资源（如图片、CSS 文件）
Preload强制提前加载资源关键资源提前加载，但不执行

使用场景 ​

  • 页面有多个外部资源（CDN、API、广告等）。
  • 页面中有用户短时间内可能会访问的外链（比如下一个页面的资源）。
  • 非关键资源，因为 dns-prefetch 不保证立即执行，在现代浏览器中可能会被优化。

总结 ​

  • 核心作用：提前解析域名，减少 DNS 解析延迟，提升网页加载速度。
  • 使用方式：常见的是 <link rel="dns-prefetch" href="//example.com">。
  • 注意事项：
    • 适用于 外部域名（同源域名已在默认解析范围）。
    • 现代浏览器通常具备 DNS 解析优化，不需要滥用 dns-prefetch。
    • 对于关键资源，可以考虑 preconnect，比 dns-prefetch 更彻底优化连接延迟。

如果你的网页依赖多个外部资源，适当使用 dns-prefetch 可以明显提升加载体验！ 🚀