dns-prefetch 的 href 必须为协议相对路径（如//cdn.example.com）或显式 https 域名，含路径、协议头、端口或参数均被静默忽略；必须置于 head 靠前位置（meta charset 和 title 后、首个外部资源前），且不可与 preconnect 混用同一域名。
dns-prefetch 的 href 必须是协议相对路径，否则标签被静默丢弃
浏览器只从 href 属性中提取主机名，其余内容全被忽略，且不报任何错误。写错格式等于没写，排查时根本看不到提示。
常见错误包括：
-
href="https://cdn.example.com"：显式协议在 HTTPS 页面里可能被跳过，旧版 Safari 尤其敏感 -
href="//cdn.example.com/js/main.js"：含路径，整个<link rel="dns-prefetch">标签被静默丢弃 -
href="cdn.example.com"：缺协议标识，被当成本地相对路径处理，查的是当前域下的子路径
✅ 正确写法只有两种：<link rel="dns-prefetch" href="//cdn.example.com">（推荐，适配当前页协议），或 <link rel="dns-prefetch" href="https://fonts.googleapis.com">（HTTPS 页面更稳，避免协议降级）。
preconnect 和 dns-prefetch 不能混用同一域名
preconnect 会直接覆盖同域名的 dns-prefetch，后者被忽略，纯属冗余。两者开销差异大：dns-prefetch 只做 DNS 解析，轻量；preconnect 会真实建立 TCP 连接 + TLS 握手，占用浏览器并发连接槽位（通常最多 6 个）。
选哪个，关键看资源使用节奏：
- 确定会在 1–2 秒内请求（如首屏字体、CDN 图片）→ 用
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>，必须带crossorigin，否则 Safari 会忽略 - 只是“可能用”或用户交互后才触发（如分享按钮调用的微博域名）→ 用
<link rel="dns-prefetch" href="//platform.twitter.com">，不占连接槽位，副作用小 - 同源域名（如
https://your-site.com）无需任何预解析，浏览器自动复用连接
标签位置错了就白加：必须放在 靠前位置
浏览器是流式解析 HTML 的，<link rel="dns-prefetch"> 或 <link rel="preconnect"> 一旦被读到就立即排队执行。如果放得太晚，相关资源请求早就发出去了。
✅ 理想位置：<meta charset> 和 <title></title> 之后、首个 <link rel="stylesheet"> 或 <script></script> 之前。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
❌ 无效位置：
- 塞在
里 - 包裹在
<template></template>中 - 用 JS 动态创建并插入（如
document.createElement('link')）
注意：多个预解析标签之间无顺序依赖，但浏览器对 dns-prefetch 不保证执行——弱网或内存紧张时会跳过，所以只加真正影响首屏或核心交互的域名，单页控制在 3–5 个以内更稳妥。
怎么验证预解析是否生效
光加标签不等于起作用。DNS 预解析是“提示”，不是强制指令，浏览器有权忽略。
Chrome DevTools → Network 标签页 → 切换到 “DNS” 类型过滤 → 刷新页面，看是否有对应域名的 DNS 解析记录，耗时应接近 0ms（说明已缓存）或明显短于后续真实请求的 DNS 时间。
更可靠的方式是对比 Waterfall 中首个跨域资源的「DNS Lookup」阶段：下降 20ms+ 才算有收益。
⚠️ 特别注意：preconnect 的验证需看「Connect」阶段是否消失或大幅缩短；而 dns-prefetch 在 Firefox 和 Chrome 中默认会对页面中已出现的外链自动做隐式预解析，所以只给用户点击才跳转的链接加 dns-prefetch，往往收效甚微。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
