Chrome、Firefox、Edge 全系支持，Safari 从14+开始支持但行为保守，常延迟至页面空闲或用户hover后才发起DNS查询，非HTML解析阶段即时执行。
rel="dns-prefetch"在哪些浏览器里能用
Chrome、Firefox、Edge 全系支持，Safari 从 14 开始支持但行为保守——它常等到页面空闲甚至用户 hover 后才真正发起 DNS 查询，不像 Chrome 那样在 HTML 解析阶段就启动。iOS/macOS 旧版 Safari（
不支持的环境不会出错，只是静默跳过；但别指望它在微信内置浏览器（X5 内核）、QQ 浏览器旧版或某些安卓 WebView 中生效——它们多数没实现该特性。
如果你的用户中 Safari 占比高（比如 iOS App 内嵌页），仅靠 rel="dns-prefetch" 不足以保障首屏外链跳转速度，得配合 JS 主动触发（如 new Image().src = "//target.com/favicon.ico"）作为 fallback。
href 写 //cdn.example.com 还是 https://cdn.example.com
必须写 //cdn.example.com，双斜杠开头的协议相对 URL。写死 https:// 或 http:// 在多数现代浏览器里会被忽略，尤其在 HTTPS 页面中写 http:// 会直接失效；而写 https:// 在 HTTP 页面中可能触发混合内容警告或被拦截。
立即学习“前端免费学习笔记（深入）”；
浏览器只提取 href 中的主机名部分做解析，协议、路径、查询参数全被丢弃。所以以下写法等效：
//cdn.example.com-
https://cdn.example.com/any/path?x=1（但不推荐，易误读）
错误示例：cdn.example.com（缺协议前缀，被当成本地路径）、//cdn.example.com:443（显式端口，部分浏览器不识别）。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
加了但 Network 面板看不到 DNS Lookup 缩短？常见原因
不是代码没生效，而是你观察的时机或对象不对。DNS 预解析结果默认缓存 60–300 秒（各浏览器不同），如果目标域名刚被访问过、TTL 没过期，浏览器直接复用缓存，就不会再发新查询——这时你在 DevTools 的 Timing 标签页里自然看不到 “DNS Lookup” 阶段变短。
验证是否真起作用，得用干净环境测试：
- 开无痕窗口，首次访问页面
- 确保目标域名（如
//fonts.gstatic.com）未在当前页其他资源中出现（比如没在<link rel="stylesheet">里直接引用） - 在 Network → Timing 查看后续 fetch 请求的 “DNS Lookup” 时间，对比不加
rel="dns-prefetch"的基线
如果仍没变化，检查是否放在了 <body> 里、是否动态插入、或 href 域名拼写错误（比如漏了子域）。
和 rel="preconnect" 能不能一起写
不能。如果同一域名既写了 rel="preconnect" 又写了 rel="dns-prefetch"，后者会被浏览器忽略——因为 preconnect 已隐含 DNS 解析，重复声明纯属冗余，还白占 HTML 体积。
选择逻辑很简单：
- 确定几秒内必发 HTTPS 请求（如首屏后立即
fetch的 API）→ 用rel="preconnect" href="https://api.example.com" crossorigin - 只是“可能点一下”的外链（如「帮助中心」跳转到
//help.site.com）→ 用rel="dns-prefetch" href="//help.site.com" - 移动端弱网或连接数紧张时，优先选
dns-prefetch，它几乎不抢 TCP 连接池
最容易被忽略的是：预解析结果有生命周期，用户停留页面超 5 分钟再点击链接，DNS 缓存大概率已过期——这时候靠的不是 HTML 里的标签，而是用户交互瞬间的 JS 补救。
