HTML中如何使用dns-prefetch预解析域名

dns-prefetch 是一种轻量、无侵入的前端性能优化手段，它让浏览器在页面加载初期就悄悄完成关键第三方域名的 DNS 解析，为后续资源请求节省几十毫秒——尤其适合跨域资源多、跳转频繁的场景；但要真正生效，必须严格遵循双斜杠协议写法、置于 head 最前端，并精准筛选高价值域名（如 CDN、核心 API、字体服务），避免滥用；它不发起真实请求、不传 Cookie、不受 CORS 限制，却也不保证执行，需与 preconnect 分层配合、理性使用，才能在不增加负担的前提下悄然提升用户体验。

dns-prefetch 是浏览器原生支持的轻量级优化手段，它只做一件事：在页面加载早期，空闲时悄悄把指定域名的 DNS 解析完成。只要用对了，能省下几十毫秒——尤其对跨域资源多、用户点击跳转频繁的页面很实在。

怎么写才有效：href 必须用双斜杠协议相对写法

浏览器需要根据当前页面协议（http 或 https）自动适配，所以 href 值不能写死 http:// 或 https://，否则在 HTTPS 页面里触发 HTTP 预解析会失败或被忽略。

• ✅ 正确：
• ❌ 错误：
• ❌ 错误：

另外，href 只需填域名（含子域），不带路径、参数、端口。例如 //fonts.googleapis.com 可以，//fonts.googleapis.com/css 不行。

放哪儿？必须放在 且越靠前越好

浏览器解析 HTML 是流式进行的。dns-prefetch 标签越早出现，DNS 查询启动得越早。如果塞在 里，或者被 JS 动态插入，大概率已错过最佳时机。

• ✅ 推荐位置：紧跟 和