DNS预解析（dns-prefetch）是提前执行域名DNS查询的轻量优化手段，仅解析不建连，适用于字体、统计、CDN等跨域资源；需在head中用link标签声明，不支持路径和通配符；相比preconnect开销更低、更安全。
DNS预解析（dns-prefetch）是一种轻量、低开销的性能优化手段，它让浏览器在真正发起请求前，提前完成域名的DNS查询，从而减少后续资源加载时的等待时间。 它不下载资源，也不建立连接，只做DNS层面的“探路”，特别适合用于用户大概率会访问的外部域名（如CDN、统计服务、字体库等）。
什么时候该用 dns-prefetch
当页面中存在跨域资源，且这些资源在用户操作后才加载（例如点击弹窗引入第三方组件、懒加载图片指向CDN、或异步加载的JS/CSS来自不同域名），就可以提前解析其域名。常见适用场景包括：
- 引用了 Google Fonts、Adobe Fonts 等字体服务的域名
- 埋点脚本（如百度统计、友盟、Sentry）对应的上报域名
- 图片/视频资源托管在独立CDN（如 cdn.example.com）
- 登录态校验、用户头像等API接口所在域名（尤其在首屏后快速触发）
怎么写 dns-prefetch 标签
在 <head> 中添加 <link rel="dns-prefetch"> 即可，href 值为协议+域名（端口非必需，通常省略）：
<link rel="dns-prefetch" href="https://fonts.googleapis.com"> <link rel="dns-prefetch" href="https://cdn.example.com"> <link rel="dns-prefetch" href="https://api.stats-service.com">
注意：不支持通配符，也不能写路径（如 https://cdn.example.com/js/ 是非法的）；HTTPS协议建议显式写出，避免协议相对URL带来的不确定性。
立即学习“前端免费学习笔记（深入）”；
和 preconnect 的区别与取舍
dns-prefetch 只做DNS查询；而 preconnect 会进一步建立TCP连接甚至完成TLS握手，开销更大但收益更高。选择依据如下：
- 若目标域名资源一定会在几秒内加载（如首屏关键CDN JS），优先用 preconnect
- 若只是“有可能”用到（如分享按钮背后的社交平台域名），用 dns-prefetch 更稳妥
- 移动端弱网下，过度使用 preconnect 可能抢占连接数，反而影响主资源；dns-prefetch 几乎无副作用
实际效果与注意事项
在真实网络中，一次DNS查询耗时可能达100–300ms（尤其在未缓存或首次访问时）。启用 dns-prefetch 后，这部分延迟可被“隐藏”在页面解析、渲染过程中。但需注意：
- 浏览器支持良好（Chrome、Firefox、Edge、Safari 14+），但旧版Safari需谨慎验证
- 不要滥用——每个额外的 dns-prefetch 都会触发一次DNS请求，过多可能增加DNS服务器压力或触发限频
- 可通过 Chrome DevTools 的 Network → DNS Lookup 查看是否生效（查找对应域名的解析时间是否显著提前）
