DNS预解析技巧，提升网页加载速度

DNS预解析（dns-prefetch）是一种轻量高效、即插即用的网页性能优化技巧，专为提前解析那些页面明确会用到却不会立即加载的第三方域名（如CDN、Google Fonts、统计SDK等）而设计；它仅需在``中靠前位置添加协议相对URL（如`//cdn.example.com`）的``标签即可触发后台DNS查询，显著缩短后续请求的首字节时间——但切忌滥用：同源域名、未确认调用的资源或HTTP/HTTPS协议写死都会导致无效甚至报错，且它仅加速DNS解析，无法解决TCP、TLS或后端瓶颈；配合`preconnect`、合理控制并发数，并通过DevTools Timing面板验证效果，才能真正让优化落地见效。

什么时候该加

只在页面里明确知道会用到、但又不会立刻加载的第三方域名时才加。比如你页面里写了 ，但这个脚本是懒加载或按需触发的；又或者你用了 Google Fonts、微信 JS-SDK、百度统计，它们的域名在 HTML 初期不出现，但后续必然发起请求。

常见误用：给当前主站域名（如 https://your-site.com）加 dns-prefetch——浏览器已经解析过它了，再预解析纯属冗余；或者给用户点击后才跳转的外部链接（如「联系我们」按钮指向 https://service.qq.com）也加——这种场景更适合用 rel="prefetch" 或直接交由浏览器自动推测。

• ✅ 推荐加：CDN 域名（//cdn.your-site.com）、字体服务（//fonts.googleapis.com）、分析 SDK（//hm.baidu.com）
• ❌ 不该加：当前页同源域名、未确认是否调用的第三方、HTTP 状态码可能 404 的测试域名
• ⚠️ 注意：如果目标域名开启了严格 CORS 且没配 Access-Control-Allow-Origin: *，某些浏览器（如旧版 Safari）可能跳过预解析

href 值写协议相对还是显式协议？

必须用双斜杠开头的协议相对 URL，即 href="//cdn.example.com"，不能写 https://cdn.example.com 或 http://cdn.example.com。

原因很简单：浏览器在预解析阶段不关心协议，只提取主机名。写死 https:// 可能导致在 HTTP 页面中触发混合内容警告（虽然不阻塞，但控制台报错）；而写 http:// 在 HTTPS 页面中则直接被忽略——现代浏览器对非安全上下文下的明文 DNS 预解析普遍禁用。

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

加在 什么位置才有效？

越靠前越好，理想位置是 和