该用 dns-prefetch 而不是 preconnect 时，适用于确定会访问某域名但请求不紧急、频次低或连接开销不敏感的场景，如 google fonts、统计脚本、cdn 静态资源；preconnect 则用于首屏必发请求的核心 api 或主 cdn 域名，因它额外完成 tcp 和 tls 握手。
什么时候该用 dns-prefetch 而不是 preconnect
只预解析 DNS 适合你确定会访问某个域名、但不确定是否马上发请求，或请求频次低、连接开销不敏感的场景。比如 Google Fonts、统计脚本域名、CDN 上的静态资源域名——它们大概率会被用到，但未必在首屏就触发完整请求。
preconnect 更重：它会提前完成 DNS + TCP + TLS（HTTPS 下），相当于把“握手”全做完，只等发 HTTP 请求。但浏览器对并发 preconnect 数量有限制（Chrome 通常 ≤6 个），滥用会导致连接池挤占、甚至拖慢真实请求。
- 用
dns-prefetch：第三方字体、分析 SDK、广告域名、备用 CDN 域名 - 用
preconnect：你明确知道首屏或交互后 1 秒内必发请求的核心 API 域名（如https://api.example.com）、主 CDN 图片服务（如https://cdn.example.com） - 两者都加？没必要。对同一个域名，
preconnect已隐含 DNS 解析，再加dns-prefetch是冗余操作
dns-prefetch 的写法和常见错误
必须写在 里，且 href 值只需协议+域名，不能带路径或查询参数。浏览器只认这个格式：
<link rel="dns-prefetch" href="//fonts.googleapis.com"><link rel="dns-prefetch" href="//cdnjs.cloudflare.com"><link rel="dns-prefetch" href="https://api.example.com">
容易踩的坑：
- 写成完整 URL（如
href="https://fonts.googleapis.com/css?family=Roboto"）→ 浏览器忽略该指令 - 对同站域名使用（如
href="//your-site.com"）→ 毫无意义，用户访问时已解析过 - 混用协议（HTTP/HTTPS 不一致）→ 可能触发额外 DNS 查询，尤其在混合内容场景下
- 数量超过 5~6 条 → 大部分浏览器会静默丢弃多余项，还可能干扰 DNS 缓存调度
preconnect 必须加 crossorigin 的三种情况
当目标资源以 CORS 模式加载时（即 JS/Fetch 请求、字体、部分图片），preconnect 必须带 crossorigin 属性，否则浏览器只会做 DNS 查询，不会真正建立 TLS 连接。
典型需要加 crossorigin 的场景：
- 字体文件（
font类型资源）→ 如https://fonts.gstatic.com - API 接口（
fetch或XMLHttpRequest）→ 如https://api.example.com - CDN 上的 JS/CSS（通过
<script src></script>或<link rel="stylesheet">加载）→ 如https://cdn.example.com
正确写法：
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="preconnect" href="https://api.example.com" crossorigin>
不加 crossorigin 的后果：Waterfall 里能看到 DNS 查询完成，但 TCP/TLS 阶段仍要重来一次，等于白忙。
如何验证 Resource Hints 是否生效
打开 Chrome DevTools → Network 标签页 → 刷新页面 → 点击任意请求 → 查看 Timing 选项卡：
- 如果
dns-prefetch生效：对应域名的后续请求中，DNS Lookup时间应接近 0ms（说明已从系统缓存读取） - 如果
preconnect生效：对应域名的首个真实请求，Connect时间应显著缩短（TCP+TLS 阶段耗时下降 50ms+ 是常见收益） - 检查
chrome://net-internals/#dns页面，能看到预解析的域名是否出现在缓存列表中
注意：不要依赖 “Initiator” 显示为 Other 就认为没生效——Resource Hints 是异步后台任务，不会出现在主请求链路里。关键看后续真实请求的 timing 数据是否改善。
实际部署时，最易被忽略的是跨域资源的 crossorigin 匹配问题，以及对同站域名误加 dns-prefetch 导致的冗余解析。这两点不排查清楚，其他优化都会打折扣。
