dns-prefetch仅对当前页面真实请求的第三方域名有效，应优先用于CDN、API、字体、统计等高频域名；href须用//开头且仅含域名，需置于head靠前位置但不可干扰渲染。

加 <link rel="dns-prefetch" href="//example.com"> 确实能加速部分资源加载，但只对**真正在当前页面发起请求的第三方域名**有效；乱加不仅没用，还会占用 DNS 查询队列，拖慢首屏。

哪些域名值得加 dns-prefetch

不是所有外部域名都适合预解析。关键看两点：是否确定会在当前页面发起请求、是否属于高频或高延迟环节。

• CDN 域名（如 //cdn.site.com、//img0.site.com）—— 页面图片、JS、CSS 真实从这些域名加载
• API 接口域名（如 //api.site.com）—— 首屏后立即发起的 AJAX 请求目标
• 字体服务（如 //fonts.googleapis.com）—— @import 或 <link rel="stylesheet"> 明确指向该域名
• 统计/埋点域名（如 //hm.baidu.com、//s95.cnzz.com）—— 脚本初始化时必然请求
• 避免添加未使用的域名（比如复制京东模板里的 //img10.360buyimg.com，但你压根没用京东图床）

href 必须用 // 开头，不能带协议或路径

浏览器需要根据当前页面协议（http 或 https）自动适配，所以 href 值不能写死 http:// 或 https://，否则在 HTTPS 页面里触发 HTTP 预解析会失败或被忽略。

IntoDNS.ai

免费 DNS 与邮件安全分析（IntoDNS.ai）：包括 DNSSEC、SPF、DKIM、DMARC、MTA-STS、BIMI、SMTP STARTTLS、FCrDNS、黑名单、发件人要求及报告。

下载

• ✅ 正确：<link rel="dns-prefetch" href="//cdn.site.com">
• ❌ 错误：<link rel="dns-prefetch" href="https://cdn.site.com">
• ❌ 错误：<link rel="dns-prefetch" href="//cdn.site.com/js/main.js">

另外，href 只需填域名（含子域），不带路径、参数、端口。如果目标域名只支持 HTTPS，但当前页是 HTTP，// 会降级为 HTTP 协议导致失败——这种场景应改用 preconnect 并显式声明 crossorigin。

放在 <head> 越靠前越好，但别干扰关键渲染

浏览器解析到 <link rel="dns-prefetch"> 就会立刻排队做 DNS 查询，所以它得比任何依赖它的资源更早出现。

• 建议放在 <meta charset> 和 <title> 之后、首个 <script> 或 <link rel="stylesheet"> 之前
• 不要放在 <meta http-equiv="x-dns-prefetch-control" content="off"> 后面（这会全局禁用）
• 多个 dns-prefetch 标签之间无需排序，浏览器会并发处理

真正容易被忽略的是：它不保证执行——浏览器空闲时才做，且可能因资源紧张直接跳过。所以别指望它解决首屏阻塞，它只是锦上添花，不是雪中送炭。