加可提前触发DNS查询，仅对页面真实请求的第三方域名有效，乱加反而拖慢首屏；需确保域名高频使用、确有资源加载，且href必须为//开头的纯主机名。
直接说结论：在 HTML 的 里加 就能触发浏览器提前做 DNS 查询，但只对真正会用到的第三方域名有效，乱加反而拖慢首屏。
哪些域名值得加 dns-prefetch
不是所有外部域名都适合预解析。关键看两点：是否确定会在当前页面发起请求、是否属于高频或高延迟环节。
- CDN 域名（如
//cdn.example.com、//img0.site.com）—— 页面图片、JS、CSS 真实从这些域名加载 - API 接口域名（如
//api.site.com）—— 首屏后立即发起的 AJAX 请求目标 - 字体服务（如
//fonts.googleapis.com）——@import或明确指向该域名 - 统计/埋点域名（如
//hm.baidu.com、//s95.cnzz.com）—— 脚本初始化时必然请求 - 避免添加未使用的域名（比如复制京东模板里的
//img10.360buyimg.com，但你压根没用京东图床）
href 写法必须用 // 开头，不能带协议
写成 http:// 或 https:// 会导致协议不匹配失败；写成完整 URL（含路径）会被浏览器忽略，只认主机名部分。
- ✅ 正确：
- ❌ 错误：
- ❌ 错误：
- ⚠️ 注意：如果目标域名只支持 HTTPS，但当前页是 HTTP，
//会降级为 HTTP 协议导致失败——这种场景应改用preconnect并显式声明crossorigin
放在 越靠前越好，但别干扰关键渲染
浏览器解析到 就会立刻排队做 DNS 查询，所以它得比任何依赖它的资源更早出现。
- 推荐位置：紧跟
和和<script></script> - 不要塞进模板 footer 或动态 JS 插入 —— 那时候 DNS 查询已无意义
- 不要和
preload混用同一域名却不同顺序：比如先preload图片再dns-prefetch，浏览器可能还没查完 DNS 就发了请求，白忙一场 - 移动端弱网下，过多
dns-prefetch可能抢占 DNS 查询队列，建议单页控制在 3–5 个以内
怎么验证它真的生效了
光加标签不等于起作用。DNS 预解析是“提示”，不是强制指令，浏览器有权忽略。
- Chrome DevTools → Network 标签页 → 切换到 “DNS” 类型过滤 → 刷新页面，看是否有对应域名的 DNS 解析记录，耗时应接近 0ms（说明已缓存）或明显短于后续真实请求的 DNS 时间
- 对比开启前后 Waterfall 中首个跨域资源的「DNS Lookup」阶段：下降 20ms+ 才算有收益
- 注意：Firefox 和 Chrome 默认会对页面中已出现的外链自动做隐式预解析，所以如果你只加了用户点击才跳转的链接域名，
dns-prefetch才是唯一手段 - 某些企业内网或定制浏览器会禁用该功能，可通过
document.createElement('link').relList.supports('dns-prefetch')检测支持性（但实际没必要运行时判断）
最容易被忽略的一点：dns-prefetch 不解决 TCP 连接、TLS 握手、HTTP 请求排队等问题，它只管 DNS 这一环。如果你的瓶颈在 TLS 或后端响应，加再多 dns-prefetch 也看不出变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
