dns-prefetch仅提前解析域名dns、不建连不握手，必须用//cdn.example.com协议相对写法并置于靠前位置，只预解析高频跨域域名，错误写法静默失效。
dns-prefetch 只做 DNS 解析，不建连
它不建立 TCP 连接，也不触发 TLS 握手，只把域名（如 cdn.example.com）解析成 IP 地址并缓存。后续真实请求（比如 fetch()、<img src>、<script src></script>）发起时，直接跳过 DNS 查询阶段，省下几十毫秒——尤其在弱网或首次访问时效果明显。
为什么不能写 https://cdn.example.com？
浏览器提取 href 中的主机名时，会严格按格式解析：//cdn.example.com 能正确提取 cdn.example.com；而 https://cdn.example.com 会被部分旧版 Safari 当作无效值跳过，http:// 在 HTTPS 页面中则被忽略。协议相对写法（//）让浏览器自动适配当前页面协议，避免混合内容风险和兼容性问题。
放在
必须早于所有依赖它的资源声明，否则预解析来不及生效：
- ✅ 推荐顺序：
<meta charset>→<title></title>→<link rel="dns-prefetch" href="//cdn.example.com">→ 首个<link rel="stylesheet">或<script></script> - ❌ 无效做法：塞进
、包在<template></template>里、用 JS 动态插入（document.createElement('link')） - ⚠️ 浏览器是流式解析 HTML 的，
dns-prefetch标签一旦被读到就立即排队，放晚了等于没加
哪些域名加了反而拖慢页面？
每个 dns-prefetch 都是一次真实 DNS 查询，浏览器并发上限通常为 6～10 个。无效或低频查询会挤占队列，干扰关键请求：
- ✅ 值得加：
//fonts.googleapis.com（字体 CSS 明确引用）、//hm.baidu.com（统计 SDK 初始化必发）、//api.example.com（首屏后立即fetch） - ❌ 别加：
//your-site.com（同源，已缓存）、//admin.example.com（子域共享主域 DNS 缓存）、//ad.doubleclick.net（不稳定、常被拦截） - ⚠️ 不支持通配符：
//*.example.com无效；//cdn1.example.com和//cdn2.example.com必须分别声明
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
