应在页面明确会用到但不立即加载的第三方域名时添加<link rel="dns-prefetch">，如懒加载脚本、Google Fonts、统计SDK等；避免为同源域名或未确认调用的域名添加，且href必须用协议相对URL（如//cdn.example.com），置于<head>中<meta charset>和<title>之后、首个外部资源之前。
什么时候该加 <link rel="dns-prefetch">
只在页面里明确知道会用到、但又不会立刻加载的第三方域名时才加。比如你页面里写了 <script src="https://cdn.example.com/lib.js"></script>，但这个脚本是懒加载或按需触发的；又或者你用了 Google Fonts、微信 JS-SDK、百度统计，它们的域名在 HTML 初期不出现，但后续必然发起请求。
常见误用：给当前主站域名（如 https://your-site.com）加 dns-prefetch——浏览器已经解析过它了，再预解析纯属冗余；或者给用户点击后才跳转的外部链接（如「联系我们」按钮指向 https://service.qq.com）也加——这种场景更适合用 rel="prefetch" 或直接交由浏览器自动推测。
- ✅ 推荐加：CDN 域名（
//cdn.your-site.com）、字体服务（//fonts.googleapis.com）、分析 SDK（//hm.baidu.com） - ❌ 不该加：当前页同源域名、未确认是否调用的第三方、HTTP 状态码可能 404 的测试域名
- ⚠️ 注意：如果目标域名开启了严格 CORS 且没配
Access-Control-Allow-Origin: *，某些浏览器（如旧版 Safari）可能跳过预解析
href 值写协议相对还是显式协议？
必须用双斜杠开头的协议相对 URL，即 href="//cdn.example.com"，不能写 https://cdn.example.com 或 http://cdn.example.com。
原因很简单：浏览器在预解析阶段不关心协议，只提取主机名。写死 https:// 可能导致在 HTTP 页面中触发混合内容警告（虽然不阻塞，但控制台报错）；而写 http:// 在 HTTPS 页面中则直接被忽略——现代浏览器对非安全上下文下的明文 DNS 预解析普遍禁用。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- ✅ 正确：
<link rel="dns-prefetch" href="//fonts.gstatic.com"> - ❌ 错误：
<link rel="dns-prefetch" href="https://fonts.gstatic.com"> - ❌ 错误：
<link rel="dns-prefetch" href="http://cdn.example.com">
加在 <head> 什么位置才有效？
越靠前越好，理想位置是 <meta charset> 和 <title> 之后、首个 <script> 或 <link rel="stylesheet"> 之前。浏览器解析 HTML 是流式的，dns-prefetch 标签一旦被读到，就会立即触发后台 DNS 查询，不等待 DOM 构建完成。
如果你把它塞在 <body> 底部，或者包裹在 <template> 里，那它根本不会执行——浏览器只在初始 HTML 解析阶段处理这类提示。
- ✅ 推荐顺序：
<meta charset>→<title>→<link rel="dns-prefetch">× N →<link rel="stylesheet"> - ⚠️ 注意：多个
dns-prefetch标签之间无顺序依赖，但浏览器并发预解析数有限（通常 6–10 个），优先保障关键资源域名 - ⚠️ 注意：不要和
<meta name="dns-prefetch-control" content="off">同时存在，后者会全局禁用所有预解析（包括浏览器自动做的）
为什么开了 dns-prefetch 还是慢？
因为 DNS 预解析只解决「域名→IP」这一步，不解决后续 TCP 握手、TLS 协商、服务器响应等环节。如果你发现预解析后首次请求仍卡在「waiting for server response」，说明瓶颈不在 DNS，而在网络链路或后端性能。
更隐蔽的问题是：预解析结果有缓存生命周期，操作系统级 DNS 缓存默认 TTL 多为 30–300 秒。如果用户隔了几分钟再点开某个预解析过的链接，缓存可能已失效，还得重新查一次。
- ✅ 验证是否生效：打开 Chrome DevTools → Network → 找任意一个目标域名的请求 → 查看 Timing 标签页里的「DNS Lookup」时间是否接近 0ms
- ✅ 补充手段：对高优先级域名，可配合
rel="preconnect"（比dns-prefetch更进一步，连 TCP+TLS 都预建） - ⚠️ 容易忽略：移动端 WebView（尤其 Android 低版本）对
dns-prefetch支持不一致，部分内核直接忽略；iOS WKWebView 支持较好，但需确保页面本身不是离线包加载
