HTML预读取DNS优化技巧

本文深入解析了HTML中dns-prefetch这一轻量级DNS预解析优化技巧的核心实践要点：仅对页面真实、高频且高延迟的第三方域名（如CDN、API接口、字体服务和统计域名）启用，严格遵循//开头、纯主机名、置于head最前端的书写规范，避免与preconnect混用或误加同源/跳转域名；强调其虽能提前解析DNS、加速后续请求，但效果高度依赖正确使用——加错位置、格式错误或滥用反而拖慢首屏，且无法替代资源压缩、CDN和缓存等基础性能优化。

加 能提前解析域名，但只对页面真实会请求的第三方域名有效；加错位置、写错格式、乱加域名，反而拖慢首屏。

哪些域名该加 dns-prefetch？

不是所有外部域名都值得预解析。关键看两点：是否确定会在当前页面发起请求、是否属于高频或高延迟环节。

• CDN 域名（如 //cdn.example.com、//img0.site.com）—— 页面图片、JS、CSS 真实从这些域名加载
• API 接口域名（如 //api.site.com）—— 首屏后立即发起的 AJAX 请求目标
• 字体服务（如 //fonts.googleapis.com、//fonts.gstatic.com）—— @import 或 明确指向该域名
• 统计/埋点域名（如 //hm.baidu.com、//s95.cnzz.com）—— 脚本初始化时必然请求
• 别加当前主站同源域名（如 //your-site.com）—— 浏览器已缓存，纯属冗余
• 别加用户点击后才跳转的外部链接（如 //service.qq.com）—— 这类更适合 rel="prefetch"

href 必须用 // 开头，不能带协议或路径

浏览器只提取主机名做 DNS 查询，其他部分会被忽略，且无任何报错提示。

• ✅ 正确：
• ❌ 错误：（旧版 Safari 可能跳过）
• ❌ 错误：（含路径，被忽略）
• ❌ 错误：（HTTPS 页面中直接失效）
• ⚠️ 注意：//fonts.googleapis.com 和 //fonts.gstatic.com 是两个独立域名，不能互相替代

必须放在 最前面，不能动态插入

浏览器是流式解析 HTML 的， 需在首次遇到跨域资源前就被读到，否则来不及触发预解析。

• ✅ 正确位置： 和