第三方统计域名需显式声明 dns-prefetch 才触发预解析，href 必须为 // 开头的纯主机名，且标签须置于 html head 中靠前位置（meta charset 和 title 后、首个外部资源前），避免与 preconnect 混用同一域名。
第三方统计域名必须显式声明才能触发预解析
浏览器不会自动为统计脚本的域名做 DNS 预解析，哪怕你页面里已经加载了 hm.baidu.com 或 s95.cnzz.com 的 JS。只有在 里明写 <link rel="dns-prefetch" href="//hm.baidu.com">，它才可能提前查 DNS。
常见错误是以为「脚本一加载，DNS 就自动做了」——其实统计 SDK 初始化（比如 _hmt.push 或 cnzz.addScript）往往发生在 DOM ready 后，此时 DNS 查询还没开始，首屏后第一笔埋点请求就会卡在 DNS 阶段。
- 必须加：只要统计脚本初始化逻辑中明确调用了
fetch、Image().src或XMLHttpRequest指向该域名，就值得加 - 不加白加：如果统计 JS 是通过
<script src="https://s95.cnzz.com/..."></script>同步加载的，那这个域名已在 HTML 解析阶段被浏览器自动记录并预查了，再加dns-prefetch属于冗余 - 注意跨子域：例如
//tongji.example.com和//log.example.com是两个独立域名，不能只加一个
href 必须用 // 开头，且不能带路径或端口
写成 <link rel="dns-prefetch" href="https://hm.baidu.com"> 在部分 Safari 版本（尤其是 iOS 15 前）会被直接跳过；写成 <link rel="dns-prefetch" href="//hm.baidu.com/pv.gif"> 则整个标签被静默忽略——浏览器只认主机名，其余全丢。
真实案例中，90% 的失效都源于 href 格式错误，但控制台零报错，很难排查。
- ✅ 正确：
<link rel="dns-prefetch" href="//hm.baidu.com">、<link rel="dns-prefetch" href="//s95.cnzz.com"> - ❌ 错误：
<link rel="dns-prefetch" href="http://hm.baidu.com">（HTTPS 页面下无效） - ❌ 错误：
<link rel="dns-prefetch" href="//hm.baidu.com/collect">（含路径，标签被丢弃） - ⚠️ 注意：如果当前页是 HTTP，而
hm.baidu.com只支持 HTTPS，// 写法会降级为 HTTP 请求失败——这种极少见但存在的场景，应改用<link rel="preconnect" href="https://hm.baidu.com" crossorigin>
位置必须比统计脚本的首次请求早得多
浏览器流式解析 HTML，dns-prefetch 标签一旦被读到就排队执行。但如果它出现在统计脚本 <script></script> 标签之后，或者塞在一堆 CSS <link> 后面，那么 DNS 查询大概率还没轮到，JS 就已经发出了第一笔 fetch("https://hm.baidu.com/...") 请求。
实测发现，Chrome 在首屏关键资源（如 CSS、同步 JS）抢占网络队列时，会主动延迟非关键 DNS 查询；Safari 更激进，常等到空闲或用户交互后才执行。
- ✅ 推荐位置：
<meta charset>和<title></title>之后、首个外部资源（如<link rel="stylesheet">或<script src="..."></script>）之前 - ❌ 无效位置：放在
里、用 JS 动态插入、包裹在<template></template>中 - ⚠️ 即使位置正确，若统计脚本是异步加载（
async或defer），也要确认它的首次请求是否真在首屏后 100ms 内发生；否则预解析收益极低
别和 preconnect 混用同一统计域名
preconnect 已隐含 DNS 预解析，且会进一步建立 TCP 连接甚至完成 TLS 握手。如果你对同一个域名既写了 dns-prefetch 又写了 preconnect，后者会覆盖前者，前者纯属浪费 HTML 体积和解析时间。
统计类域名通常只需 dns-prefetch：它们的请求频率低、连接复用少、且多数不涉及 CORS 预检（Image().src 方式上报最轻量）。只有当你确定后续会高频发起 HTTPS fetch（比如实时用户行为流），才考虑升级为 preconnect。
- ✅ 合理组合：
<link rel="dns-prefetch" href="//hm.baidu.com">+<link rel="preconnect" href="https://api.example.com" crossorigin>（不同域名） - ❌ 不合理：
<link rel="dns-prefetch" href="//hm.baidu.com">+<link rel="preconnect" href="https://hm.baidu.com" crossorigin>（重复，无收益） - ⚠️ 注意：
preconnect要求显式声明crossorigin，否则在某些浏览器中不生效；而dns-prefetch无需该属性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
