应为cdn、api接口、字体服务、统计域名添加dns-prefetch；避免同源域名、跳转链接；href须以//开头且仅含主机名；需置于head最前；勿与preconnect混用同一域名。
加 <link rel="dns-prefetch"> 能提前解析域名，但只对页面真实会请求的第三方域名有效；加错位置、写错格式、乱加域名，反而拖慢首屏。
哪些域名该加 dns-prefetch？
不是所有外部域名都值得预解析。关键看两点：是否确定会在当前页面发起请求、是否属于高频或高延迟环节。
- CDN 域名（如
//cdn.example.com、//img0.site.com）—— 页面图片、JS、CSS 真实从这些域名加载 - API 接口域名（如
//api.site.com）—— 首屏后立即发起的 AJAX 请求目标 - 字体服务（如
//fonts.googleapis.com、//fonts.gstatic.com）——@import或<link rel="stylesheet">明确指向该域名 - 统计/埋点域名（如
//hm.baidu.com、//s95.cnzz.com）—— 脚本初始化时必然请求 - 别加当前主站同源域名（如
//your-site.com）—— 浏览器已缓存，纯属冗余 - 别加用户点击后才跳转的外部链接（如
//service.qq.com）—— 这类更适合rel="prefetch"
href 必须用 // 开头，不能带协议或路径
浏览器只提取主机名做 DNS 查询，其他部分会被忽略，且无任何报错提示。
- ✅ 正确：
<link rel="dns-prefetch" href="//cdn.site.com"> - ❌ 错误：
<link rel="dns-prefetch" href="https://cdn.site.com">（旧版 Safari 可能跳过） - ❌ 错误：
<link rel="dns-prefetch" href="//cdn.site.com/js/main.js">（含路径，被忽略） - ❌ 错误：
<link rel="dns-prefetch" href="http://fonts.googleapis.com">（HTTPS 页面中直接失效） - ⚠️ 注意：
//fonts.googleapis.com和//fonts.gstatic.com是两个独立域名，不能互相替代
必须放在
浏览器是流式解析 HTML 的，<link rel="dns-prefetch"> 需在首次遇到跨域资源前就被读到，否则来不及触发预解析。
- ✅ 正确位置：
<meta charset>和<title></title>之后、首个<link rel="stylesheet">或<script></script>之前 - ❌ 错误做法：丢在
底部、用document.write()注入、或 JS 执行完再appendChild - ⚠️ 它不阻塞渲染，但浏览器只在空闲时执行；放太晚，可能被首屏 CSS/JS 抢占 CPU 和网络带宽
- ⚠️ 多个
dns-prefetch标签之间无顺序依赖，但浏览器并发上限通常 6～10 个，优先保障关键资源域名
别和 preconnect 混用同一域名
dns-prefetch 只做 DNS 解析，开销极低；preconnect 会进一步建 TCP 连接 + TLS 握手，资源占用高，且受浏览器并发限制（通常最多 6 个）。
- ✅ 同一域名只选一个：
preconnect更激进，适合确定高频使用且支持 HTTPS 的域名（如字体服务） - ✅ 若只是“可能用到”或“用户触发后才发请求”，用
dns-prefetch更稳妥 - ❌ 同时写两者：
preconnect会覆盖dns-prefetch，后者被忽略，纯属冗余 - ⚠️ 它不保证执行——弱网、内存紧张、DNS 服务器限频时，浏览器可能直接跳过。所以别指望它兜底，核心优化还得靠资源压缩、CDN、缓存策略这些实打实的手段
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
