dns-prefetch必须写对href且置于head靠前位置才生效；href仅支持//域名或https://域名（https页），含路径、端口、缺协议等均被静默忽略；须在和之后、首个外部资源前，否则无效。
href 必须只含协议相对域名，否则整个标签被静默丢弃
浏览器只从 href 属性中提取主机名做 DNS 查询，其余内容全被忽略，且不报任何错误——写错等于没写，查不到日志也看不到警告。
-
href="//cdn.example.com"✅ 正确：协议相对，适配当前页 HTTP/HTTPS -
href="https://fonts.googleapis.com"✅ 可用：HTTPS 页面更稳，避免协议降级风险 -
href="https://cdn.example.com"❌ Safari 可能跳过，旧版尤其敏感 -
href="//cdn.example.com/js/app.js"❌ 含路径，整个<link rel="dns-prefetch">标签被静默丢弃 -
href="cdn.example.com"❌ 缺协议标识，被当成本地相对路径，查的是your-site.com/cdn.example.com
必须放在 靠前位置，晚了就完全失效
浏览器是流式解析 HTML 的，<link rel="dns-prefetch"> 一旦被读到就立即排队执行 DNS 查询。如果它出现在首个 <link rel="stylesheet"> 或 <script></script> 之后，相关资源请求大概率已经发出。
- ✅ 推荐顺序：
<meta charset>→<title></title>→ 所有<link rel="dns-prefetch">→ 首个外部资源标签 - ❌ 无效位置：塞在
里、包裹在<template></template>中、用 JS 动态创建并插入（如document.createElement('link')） - ⚠️ Safari 更保守：可能延迟到空闲或用户 hover 后才执行，放得越早，越有机会抢在首屏关键请求前完成
只对后续异步请求的第三方跨域域名有效，同源加了也白费
dns-prefetch 不加速首屏资源本身，只影响后续异步请求（如懒加载图片、首屏后 fetch、字体 CSS 加载等）。加错对象不仅没收益，还会挤占浏览器 DNS 并发队列（通常限 6～10 个）。
- ✅ 值得加：
//cdn.example.com（真实加载了图片/JS/CSS）、//api.example.com（首屏后立即发起 AJAX）、//hm.baidu.com（统计脚本初始化必调） - ❌ 不该加：
//your-site.com（同源，DNS 缓存已共享）、//admin.example.com（子域共享主域缓存）、//ad.doubleclick.net（常被拦截，不稳定） - ⚠️ 注意：同一主域下多个 CDN 子域（如
cdn1.example.com和cdn2.example.com）若共用权威 DNS，加一个就够了
别和 preconnect 混用同一域名，后者会直接覆盖前者
preconnect 会真实建立 TCP 连接 + TLS 握手，开销远大于 dns-prefetch；两者混用同一域名时，preconnect 优先，dns-prefetch 被静默忽略。
- ✅ 确定 1–2 秒内必用（如首屏字体、核心 API）→ 用
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - ✅ “可能用”或用户交互后才触发（如分享按钮调用微博）→ 用
<link rel="dns-prefetch" href="//platform.twitter.com"> - ❌ 不要同时写：
<link rel="dns-prefetch" href="//api.example.com">和<link rel="preconnect" href="https://api.example.com" crossorigin>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
