HTML中link预获取 HTML中link标签dns-prefetch优化

从现在开始，努力学习吧！本文《HTML中link预获取 HTML中link标签dns-prefetch优化》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

rel="dns-prefetch"仅提前解析DNS，不发起请求、不下载资源；适用于明确将访问且未缓存的跨域域名，如CDN、统计脚本、字体服务等。

link 标签里的 rel="dns-prefetch" 不是“预获取资源”，它只做一件事：提前解析域名的 DNS，不发 HTTP 请求，不下载任何文件，也不影响页面渲染。很多人把它和 rel="prefetch" 或 rel="preload" 混用，结果既没提速，还加了冗余代码。

什么时候该加 dns-prefetch

只在你明确知道页面后续会请求**跨域资源**，且该域名尚未被解析过时才需要。典型场景包括：

• 第三方统计脚本（如 https://www.google-analytics.com/ga.js）
• CDN 上的字体或图片（如 https://fonts.gstatic.com、https://cdn.example.com）
• 埋点 API 域名（如 https://log.myapp.com），但注意：仅限纯域名解析，不是 API 调用

如果所有资源都同源，或者浏览器已缓存过该域名的 DNS（TTL 未过期），加了也白加。

dns-prefetch 的写法和常见错误

正确写法必须满足三个条件：协议明确、域名精简、放在 早期：

• 写成 —— ✅ 协议 + 域名，无路径
• 别写成 href="//fonts.gstatic.com" —— ❌ 协议相对地址在某些旧浏览器里可能失效
• 别写成 href="https://fonts.gstatic.com/some/font.woff2" —— ❌ 含路径会被忽略，DNS 解析只认域名层级
• 别动态插入（比如 JS 创建 link 再 append 到 head）—— ❌ 大部分浏览器不处理动态 dns-prefetch

Chrome DevTools 的 Network → Timing 标签页里，能看到 DNS Lookup 阶段是否变短；若没变化，大概率是域名已缓存，或写法无效。

dns-prefetch 和其他 rel 的关键区别

它们解决的问题完全不同，不能互相替代，也不能叠加使用：

• rel="dns-prefetch"：只触发 DNS 查询，毫秒级，零带宽消耗
• rel="preconnect"：比 dns-prefetch 更进一步，建立 TCP 连接 + TLS 握手（适合高频跨域请求，如 API 域名）
• rel="prefetch"：下载资源到 HTTP 缓存，需空闲、同源、页面未卸载，且不执行任何逻辑
• rel="preload"：高优先级加载当前页必用资源，会触发实际 fetch，影响首屏性能

比如你要加载 https://api.example.com/data.json，最优组合是： + ；但别加 prefetch，除非你确定用户下一步 80% 会点某个按钮触发这个请求。

真正容易被忽略的是：dns-prefetch 对 HTTPS 域名有效，但对使用 IP 直连的后端（比如 https://192.168.1.100:8080）完全无效——DNS 解析的前提是有域名。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~