dns-prefetch仅在首次访问且无dns缓存时生效，典型收益20–120ms，4g弱网可达150ms+；必须写为//domain.com、置于靠前位置、仅用于高频第三方跨域域名，错误格式或位置将静默失效。
它只在首次访问且无 DNS 缓存时生效，典型收益是 20–120ms，4G 弱网下可达 150ms+；但加错位置、写错格式、选错域名，结果就是零增益——而且浏览器连错误提示都不给。
dns-prefetch 的收益到底在哪看？
别盯着整页的 FCP 或 TTFB，那些被 JS 执行、布局重排、渲染阻塞全盖住了。真实收益只体现在单个跨域请求的 DNS Lookup 阶段是否提前、是否缩短。
- 打开 Chrome DevTools → Network 标签页 → 找到目标资源（比如
https://cdn.example.com/main.js）→ 点开 Timing → 看DNS Lookup时间戳是否出现在页面加载早期（理想是 0–200ms 内），且数值明显小于未加时 - 必须禁用
uBlock Origin等广告拦截扩展，它们会静默屏蔽dns-prefetch请求，导致实测失真 - 缓存命中时
DNS Lookup显示为 0 是正常现象，不是优化失败——说明浏览器复用了本地或系统 DNS 缓存，这恰恰证明预解析已“完成过一次”
href 必须写成 //example.com，否则等于没写
浏览器只提取 href 中的主机名做 DNS 查询，其余部分全丢弃。写错格式不会报错，但标签直接被忽略。
IntoDNS.ai
下载
免费 DNS 与邮件安全分析（IntoDNS.ai）：包括 DNSSEC、SPF、DKIM、DMARC、MTA-STS、BIMI、SMTP STARTTLS、FCrDNS、黑名单、发件人要求及报告。
- ✅ 正确：
<link rel="dns-prefetch" href="//cdn.example.com">（协议相对，最兼容） - ✅ 可接受：
<link rel="dns-prefetch" href="https://fonts.googleapis.com">（显式 HTTPS，现代环境更稳） - ❌ 错误：
<link rel="dns-prefetch" href="https://cdn.example.com/js/app.js">（含路径，整个标签失效） - ❌ 错误：
<link rel="dns-prefetch" href="cdn.example.com">（缺//，被当成本地路径处理） - ⚠️ 注意：如果当前页是 HTTP，而目标域名只支持 HTTPS（如某些 API 服务），
//写法会降级为 HTTP 请求并失败——这种场景应改用rel="preconnect"并显式声明crossorigin
放在哪儿才算真正起作用？
浏览器流式解析 HTML，dns-prefetch 标签一旦被读到就立刻排队。晚了，相关资源请求早就发出去了。
- ✅ 推荐位置：
<meta charset>和<title></title>之后、首个跨域<link rel="stylesheet">或<script src="https://..."></script>之前 - ❌ 无效位置：塞在
里、包裹在<template></template>中、或由 JS 动态插入（document.createElement('link')） - ⚠️ Safari 更保守，常延迟到空闲或用户交互后才执行，所以对 iOS 用户占比高的项目，不能只依赖它
- 多个域名要分别声明：
//fonts.googleapis.com和//fonts.gstatic.com是两个独立域名，必须各加一条
哪些域名值得加，哪些纯属浪费？
浏览器 DNS 查询队列有限（通常 6～10 个），加太多反而挤占关键请求调度优先级，尤其在弱网或低端设备上。
- ✅ 值得加：
//cdn.example.com（首屏图片/JS/CSS 实际加载）、//api.example.com（首屏后立即fetch）、//hm.baidu.com（统计 SDK 初始化必发） - ❌ 不该加：
//your-site.com（同源，浏览器已缓存）、//ad.doubleclick.net（不稳定、常被拦截）、//admin.example.com（子域与主域共享 DNS 缓存） - ⚠️ 子域之间不共享缓存：
cdn1.example.com和cdn2.example.com是两次独立查询，但仅当它们由不同权威 DNS 管理、且都被首屏资源明确引用时，才需分别加 - ⚠️ 别和
rel="preconnect"混用同一域名——浏览器可能忽略其中一项，两者目标不同，不能叠加
最常被忽略的一点：它只对「后续异步请求」有效，比如 JS 中动态 fetch、懒加载图片、字体 CSS 加载后的 @font-face 请求。你写在 里的 <script src="https://..."></script> 不会因此变快——那部分 DNS 查询早已随 HTML 解析同步触发了。
