dns-prefetch 的 href 必须为协议相对域名（如//cdn.example.com）或显式 https 域名，不可含路径、端口、参数，且须置于 head 靠前位置；仅对后续异步请求的第三方域名有效，同源或未使用域名无效，不可与 preconnect 混用同一域名。
href 必须只写协议相对域名，带路径或协议头就失效
浏览器只从 href 属性中提取主机名做 DNS 查询，其余内容全被忽略——写错等于没写，且控制台零报错，极难排查。
- ✅ 正确：
<link rel="dns-prefetch" href="//cdn.example.com">（双斜杠开头，无路径、无端口、无查询参数） - ✅ 正确：
<link rel="dns-prefetch" href="https://fonts.googleapis.com">（显式 HTTPS，现代环境更稳，但需确保页面也是 HTTPS） - ❌ 错误：
<link rel="dns-prefetch" href="//cdn.example.com/js/app.js">（含路径，整个标签被静默丢弃） - ❌ 错误：
<link rel="dns-prefetch" href="http://api.example.com">（HTTPS 页面下大概率跳过） - ❌ 错误：
<link rel="dns-prefetch" href="cdn.example.com">（缺协议标识，被当成本地相对路径处理）
特别注意：如果目标域名仅支持 HTTPS，而当前页是 HTTP，// 写法会降级为 HTTP 请求失败——此时应换用 <link rel="preconnect"> 并显式声明 crossorigin。
必须放在 靠前位置，动态插入或放太晚等于白加
浏览器流式解析 HTML，<link rel="dns-prefetch"> 一旦被读到就立即排队执行 DNS 查询。放得太晚，相关资源请求早就发出去了。
- ✅ 推荐位置：
<meta charset>和<title></title>之后、首个<link rel="stylesheet">或<script></script>之前 - ❌ 无效位置：塞在
里、包裹在<template></template>中、或由 JS 动态创建（如document.createElement('link')） - ⚠️ 即使位置正确，若前面堆了大量 CSS/JS，DNS 查询可能被首屏关键资源抢占调度优先级，延迟执行
只对后续真实异步请求的第三方域名有效，同源或未用域名纯属浪费
dns-prefetch 不加速首屏资源，只影响 JS 中 fetch、懒加载图片、字体 CSS 加载等后续异步请求。每个预解析都占用浏览器 DNS 并发队列（通常限 6～10 个），乱加反而拖慢真实请求。
- ✅ 值得加：
//cdn.example.com（页面真实加载了图片/JS/CSS）、//api.example.com（首屏后立即发起 AJAX）、//hm.baidu.com（统计脚本初始化必调） - ❌ 不该加：
//your-site.com（同源，浏览器已缓存解析）、//ad.doubleclick.net（广告联盟不稳定、常被拦截）、//admin.example.com（子域共享主域 DNS 缓存） - ⚠️ Safari 对
dns-prefetch执行更保守，常延迟到空闲或用户交互后；DNS 缓存默认仅 60–300 秒，长停留后点击仍可能重新查
不能和 preconnect 混用同一域名，否则后者直接覆盖前者
dns-prefetch 只做 DNS 解析，preconnect 会进一步建连 + TLS 握手。两者目标不同，混用同一域名不仅无收益，还白占 HTML 体积和解析队列。
- ✅ 正确组合：
<link rel="preconnect" href="https://cdn.example.com">（主 CDN，确定高频使用） +<link rel="dns-prefetch" href="//stats.example.com">（统计域名，“可能用但不紧急”） - ❌ 错误写法：
<link rel="dns-prefetch" href="//cdn.example.com"> <link rel="preconnect" href="//cdn.example.com">（后者覆盖前者，前者冗余） - ⚠️
preconnect开销更大，受浏览器并发限制（通常最多 6 个），别盲目叠加；IE11 不支持preconnect但支持dns-prefetch，兼容性要求高时可降级使用后者
真正容易被忽略的是：DNS 预解析结果缓存时间短（各浏览器 60–300 秒不等），用户停留久再触发请求时，很可能又要重查——这不是配置问题，是协议限制本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
