link rel="dns-prefetch"是浏览器原生支持的轻量级优化，仅提前解析指定跨域域名DNS，需用//双斜杠协议写法、置于<head>靠前位置，只对后续确有请求的第三方域名有效，不保证执行。
什么是 link rel="dns-prefetch"？
它是个轻量级提示，告诉浏览器：「这个域名我稍后大概率会用到，你提前去查下 DNS，别等真正发请求时才卡住」。本质是发起一个异步的 DNS 查询，不阻塞渲染，也不触发真实资源加载。
dns-prefetch 该加在哪些域名上？
只对跨源（cross-origin）且后续确有资源请求的域名有效。同源域名浏览器自动优化，加了也白加；没后续请求的域名，纯属浪费一次 DNS 查询。
- 典型适用场景：
https://fonts.googleapis.com（用于@import或link rel="stylesheet"）、https://cdn.example.com（用于图片、JS、CSS）、https://api.example.com（如果页面初始化就发 fetch） - 不适用：
http://localhost:3000（开发环境通常不走 DNS）、https://example.com（已同源或已在 HTML 中通过script/img引用过，浏览器已缓存解析结果） - 注意协议必须匹配：写
https://fonts.googleapis.com就不能只写fonts.googleapis.com；HTTP/HTTPS 混用可能被忽略
和 preconnect 有什么区别？什么时候选哪个？
dns-prefetch 只做 DNS 解析；preconnect 会继续走 TCP 握手 + TLS 协商（如果 HTTPS），开销更大但准备更充分。现代浏览器对 preconnect 更激进，但也更耗资源。
- 优先用
preconnect：主资源域名（如 CDN、API 服务），且你确定一定会用（比如首屏 JS/CSS 来自该源） - 降级用
dns-prefetch：次要域名、或兼容性要求高（IE 不支持preconnect，但支持dns-prefetch） - 别混用同一域名：同时写
dns-prefetch和preconnect对同一地址，后者会覆盖前者，前者冗余 - 示例正确写法：
<link rel="preconnect" href="https://cdn.example.com"><br><link rel="dns-prefetch" href="https://stats.example.com">
常见失效原因和调试方法
加了没效果？大概率是浏览器没执行，或根本没触发预期请求。打开 Chrome DevTools → Network → 刷新页面 → 看「Timing」标签页里 DNS 查询是否提前出现，或用命令行工具验证：
立即学习“前端免费学习笔记（深入）”；
- 检查是否被屏蔽：某些隐私模式/浏览器扩展（如 uBlock Origin）会禁用
dns-prefetch，可临时禁用扩展测试 - 检查控制台警告：
Failed to parse 'dns-prefetch' link directive表示 href 格式错误（比如漏了https://） - 检查响应头：
X-DNS-Prefetch-Control: off会全局禁用，需服务端移除或设为on - 移动端注意：iOS Safari 对
dns-prefetch支持较弱，部分版本直接忽略；Android Chrome 较稳定
dns-prefetch，结果发现那些域名一年只在某个埋点上报里出现一次。 
