dns-prefetch 必须在初始 HTML 流式解析阶段、紧接 <meta charset> 和 <title> 后、首个外部资源前声明，动态插入（如 document.write 或 innerHTML）因错过解析时机而静默失效。
dns-prefetch 在动态生成 HTML 页面中极易失效——不是浏览器不支持，而是生成时机和插入位置破坏了流式解析前提。
为什么 document.write() 或 innerHTML 插入的 dns-prefetch 没用
浏览器只在初始 HTML 解析阶段识别并排队执行 dns-prefetch；一旦 DOM 构建完成（即 DOMContentLoaded 触发后），再通过 document.write()、element.innerHTML = '...' 或 document.createElement('link') 动态插入的标签，浏览器直接忽略，不触发任何 DNS 查询。
- 常见错误场景：SSR 后端拼接 HTML 时漏掉预解析；前端用模板字符串渲染首屏后补加
<link rel="dns-prefetch"> - 验证方法：打开 Chrome DevTools → Network → 过滤
DNS类型，刷新页面——动态插入的标签不会产生任何记录 - 根本原因：DNS 预解析必须发生在“首次遇到跨域资源请求之前”，而动态插入已错过这个窗口
服务端渲染（SSR）中正确注入 dns-prefetch 的位置
必须让 <link rel="dns-prefetch"> 出现在最终 HTML 字符串的 <head> 最前端，紧接在 <meta charset> 和 <title> 之后、首个外部资源（如 CSS/JS）之前。
- Node.js（如 Express）示例：
res.send(`<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My App</title> <link rel="dns-prefetch" href="//cdn.example.com"> <link rel="dns-prefetch" href="//api.example.com"> <link rel="stylesheet" href="/main.css"> </head> <body>...</body> </html>`);
- 禁止在模板中用条件逻辑包裹：如
<% if (isProd) { %><link ...><% } %>可能因变量未定义导致漏加 - Next.js / Nuxt 等框架需使用对应 Head API（如
next/head或useHead），且确保调用发生在 SSR 阶段，而非客户端useEffect中
纯前端动态页面（如 SPA）怎么处理
单页应用无法依赖 HTML 初始解析，但仍有可行路径：把 DNS 预解析逻辑前置到资源实际请求前，用轻量级替代方案触发解析。
立即学习“前端免费学习笔记（深入）”；
- 对关键接口域名，在
fetch()或axios.get()发起前，手动触发一次空解析：// 不要等组件挂载完才做 const preResolveDNS = (host) => { const link = document.createElement('link'); link.rel = 'dns-prefetch'; link.href = `//${host}`; // 必须 append 到 head 才可能生效（仅限尚未完成初始解析的页面） if (document.head && !document.querySelector(`link[rel="dns-prefetch"][href="//${host}"]`)) { document.head.appendChild(link); } }; preResolveDNS('api.example.com'); - 更可靠做法：用
new Image().src = '//api.example.com/favicon.ico'或fetch('//api.example.com/health', {method: 'HEAD', keepalive: true})—— 虽非标准，但在多数浏览器中能强制触发 DNS 查询 - 注意：不要在路由切换后批量补加多个
dns-prefetch，浏览器并发上限通常为 6～10 个，无效请求会挤占真实请求调度队列
容易被忽略的兼容性陷阱
动态生成场景下，协议写法和域名粒度错误更难排查，因为没有控制台报错，只有 DNS 查找耗时没下降。
-
//fonts.googleapis.com和//fonts.gstatic.com是两个独立权威 DNS，必须分别声明，不能省略任一 - 写成
https://api.example.com在 Safari 15.6+ 仍可能被跳过；写成//api.example.com/v1（含路径）整条标签静默失效 - CDN 多子域（如
cdn1.example.com/cdn2.example.com）是否需要都加？仅当它们由不同 DNS 服务商管理时才需分开加；否则加主域名example.com即可共享缓存 - 移动端弱网下，建议单页
dns-prefetch总数控制在 3～5 个以内，优先保障首屏接口和字体服务
真正起作用的从来不是“有没有加”，而是“生成时有没有塞进初始 HTML 流”以及“加的是不是那个马上就要发请求的域名”。动态页面尤其容易在构建链路中丢失这个时机——检查你最终返回给浏览器的原始 HTML 字符串，才是唯一可信的验证点。
