dns-prefetch 必须置于 和 之后、首个外部资源之前，且 href 仅含协议相对域名；无效位置包括 、 或 js 动态插入；不应与 preconnect 混用同一域名，移动端建议控制在 3–5 个以内。
dns-prefetch 标签必须放在 和 之后、首个外部资源之前
浏览器是流式解析 HTML 的，<link rel="dns-prefetch"> 一旦被读到就立即排队执行 DNS 查询。如果它出现在 <link rel="stylesheet"> 或 <script src></script> 后面，首屏资源请求大概率已经发出，预解析完全来不及生效。
常见无效位置包括： 里、<template></template> 中、或用 JS 动态插入（如 document.createElement('link')）——这些都不会触发任何 DNS 查询。
-
✅ 推荐顺序：
<meta charset>→<title></title>→ 所有<link rel="dns-prefetch">→ 首个<link rel="stylesheet">或<script></script> - ⚠️ Safari 更保守：可能延迟到空闲或用户交互后才执行，所以放得越早，越有机会抢在首屏关键请求前完成
-
❌ 不要混在 CSS/JS 堆里：比如插在
<link rel="stylesheet" href="main.css">和<link rel="stylesheet" href="vendor.css">中间，等于白加
href 必须只含协议相对域名，不能带路径、端口或显式协议
浏览器只从 href 中提取主机名做 DNS 查询，其余内容全被忽略。写错格式不会报错，但标签实际无效，排查时极难发现。
-
✅ 正确写法：
<link rel="dns-prefetch" href="//cdn.example.com">（推荐）、<link rel="dns-prefetch" href="https://fonts.googleapis.com">（HTTPS 页面更稳） -
❌ 常见错误：
href="https://api.example.com"（Safari 可能跳过）、href="//cdn.example.com/js/app.js"（含路径，整个标签被静默忽略）、href="cdn.example.com"（无协议标识，被当成本地路径处理） -
⚠️ 注意协议降级风险：当前页是 HTTPS，但目标域名只支持 HTTPS，却写了
//api.example.com，可能因降级为 HTTP 导致失败；这种场景应改用<link rel="preconnect">并声明crossorigin
只加确定会用的第三方跨域域名，别碰同源、子域和备用 CDN
每个 <link rel="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（广告联盟不稳定、常被拦截） -
⚠️ 别凑数：不支持通配符（
//*.example.com无效）；也不必为cdn1和cdn2分别加，除非它们由不同权威 DNS 管理
别和 preconnect 混用同一域名，否则后者覆盖前者
dns-prefetch 只做 DNS 解析，开销极低；preconnect 会进一步建 TCP 连接 + TLS 握手，资源占用高且受并发限制（通常最多 6 个）。两者目的不同，混用不仅冗余，还可能浪费连接资源。
-
✅ 推荐策略：只确定会发请求、且该域名支持 HTTPS → 用
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>；只是“有可能”用到，或不确定是否真加载 → 用<link rel="dns-prefetch" href="//metrics.example.com"> -
❌ 错误做法：对同一个域名既写
preconnect又写dns-prefetch，后者会被忽略 -
⚠️ 移动端弱网下：过多
dns-prefetch可能抢占 DNS 查询队列，单页建议控制在 3–5 个以内
DNS 类型过滤记录，不是看控制台有没有报错——因为写错格式根本不会报错，只会静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
