dns-prefetch 生效需满足三要素：格式正确（href="//domain.com"）、位置靠前（在首个外部资源前）、仅用于确定使用的跨域第三方域名；写错格式、放错位置或滥用均导致静默失效。
dns-prefetch 标签写错就等于没写，浏览器不报错、不警告、也不执行——你查 Network 面板根本看不到 DNS 查询记录，但页面加载就是慢了一截。
为什么 dns-prefetch 没生效？常见写法全错
浏览器只从 href 属性中提取主机名做 DNS 查询，其余内容一律丢弃。写错格式不会报错，但标签静默失效。
-
href="https://cdn.example.com"：显式协议在 HTTPS 页面中可能被 Safari 跳过 -
href="//cdn.example.com/js/main.js"：含路径，整个<link rel="dns-prefetch">标签被忽略 -
href="cdn.example.com"：缺//，被当成本地相对路径，查的是your-site.com/cdn.example.com -
<meta name="dns-prefetch" content="//cdn.example.com">：meta标签根本不支持该语义，浏览器直接无视
dns-prefetch 必须放对位置，晚了就白加
浏览器是流式解析 HTML 的，<link rel="dns-prefetch"> 一读到就立即排队执行 DNS 查询。如果它出现在首个 <link rel="stylesheet"> 或 <script></script> 之后，首屏资源请求大概率已经发出去了。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- ✅ 正确顺序：
<meta charset>→<title></title>→ 所有<link rel="dns-prefetch">→ 首个外部资源 - ❌ 无效位置：塞在
里、包在<template></template>中、用 JS 动态创建并插入（如document.createElement('link')） - ⚠️ Safari 更保守，可能延迟到空闲或用户交互后才执行，所以越早放越有机会抢在关键请求前完成
只加确定会用的第三方跨域域名，别碰同源和子域
每个 dns-prefetch 都是一次真实 DNS 查询，浏览器并发上限通常为 6～10 个。无效查询不仅浪费系统资源，还可能挤占真实请求的调度队列。
- ✅ 值得加：
//cdn.example.com（图片/JS/CSS 真实加载）、//api.example.com（首屏后立即fetch）、//hm.baidu.com（统计 SDK 初始化必发） - ❌ 不该加：
//your-site.com（同源，DNS 缓存已共享）、//admin.example.com（子域共享主域缓存）、//ad.doubleclick.net（不稳定、常被拦截） - ⚠️ 别为
cdn1.example.com和cdn2.example.com分别加，除非它们由不同权威 DNS 管理；也不必凑数加懒加载模块所用域名
别和 preconnect 混用同一域名
dns-prefetch 只做 DNS 解析；preconnect 会进一步建 TCP 连接 + TLS 握手，开销更大但收益更高。两者混用同一域名时，preconnect 会直接覆盖 dns-prefetch。
- ✅ 场景选择：
dns-prefetch适合轻量、高频、不确定是否立即使用的域名（如字体服务）；preconnect更适合确定会立刻发起请求且高延迟的关键第三方（如首屏 API） - ⚠️ 如果目标域名只支持 HTTPS，但当前页是 HTTP，
//写法会降级为 HTTP 协议导致失败——这种场景应改用<link rel="preconnect">并显式声明crossorigin - ⚠️
//fonts.gstatic.com和//fonts.googleapis.com是两个独立域名，不能互相替代；也不支持通配符，//*.example.com无效
最常被忽略的一点：它不加速首屏资源加载，只影响后续异步请求（比如 JS 里的 fetch、懒加载图片、点击弹窗加载的第三方组件）。加错对象、放错位置、写错格式，三者任一发生，效果就是零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
