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 的写法和常见错误
正确写法必须满足三个条件：协议明确、域名精简、放在 早期：
- 写成
<link rel="dns-prefetch" href="https://fonts.gstatic.com">—— ✅ 协议 + 域名，无路径 - 别写成
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，最优组合是：<link rel="dns-prefetch" href="https://api.example.com"> + <link rel="preconnect" href="https://api.example.com">；但别加 prefetch，除非你确定用户下一步 80% 会点某个按钮触发这个请求。
真正容易被忽略的是：dns-prefetch 对 HTTPS 域名有效，但对使用 IP 直连的后端（比如 https://192.168.1.100:8080）完全无效——DNS 解析的前提是有域名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
