HTML头部链接dns-prefetch的优化作用（高级进阶）-html教程-PHP中文网

仅加速后续异步跨域请求的dns解析，需写在靠前位置、href仅含协议+域名，错误格式无效且无报错；不可滥用或与preconnect混用同一域名，浏览器可能忽略执行。

html头部链接dns-prefetch的优化作用（高级进阶）

加 <link rel="dns-prefetch"> 本身不加速首屏资源加载，它只对后续异步请求（如 JS 中的 fetch、图片懒加载、点击后弹窗引入第三方组件）真正用到的跨域域名有效；加错位置、写错格式、滥用域名，反而会挤占 DNS 查询队列，拖慢关键请求。

href 必须是协议+域名，不能带路径或端口

浏览器只提取 href 中的主机名做 DNS 查询，其余全被丢弃。写错等于没写，且无任何控制台报错提示。

✅ 正确：<link rel="dns-prefetch" href="https://fonts.googleapis.com">（显式 HTTPS，现代环境更稳）
✅ 正确：<link rel="dns-prefetch" href="//cdn.example.com">（双斜杠协议相对，兼容旧 Safari）
❌ 错误：<link rel="dns-prefetch" href="https://cdn.example.com/js/app.js">（含路径，整个标签被忽略）
❌ 错误：<link rel="dns-prefetch" href="cdn.example.com:8080">（无协议+显式端口，被当成本地路径处理）
⚠️ 注意：如果当前页是 HTTPS，但写了 http://，该标签大概率被跳过；// 在 HTTP 页面中会降级为 HTTP，可能失败——这种场景应改用 preconnect 并声明 crossorigin

必须放在靠前位置，且不能动态插入

浏览器流式解析 HTML，<link rel="dns-prefetch"> 一旦被读到就立即排队执行。放得太晚，相关资源请求早已发出。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

✅ 推荐位置：<meta charset> 和 <title></title> 之后、首个 <link rel="stylesheet"> 或 <script></script> 之前
❌ 无效位置：塞在里、包裹在 <template></template> 中、或由 JS 动态 document.createElement('link') 插入
⚠️ 它不阻塞渲染，但若放在大量 CSS/JS 后面，DNS 查询可能被首屏关键资源抢占调度优先级；Safari 更保守，常延迟到空闲或用户交互后才执行

只对确定高频使用的第三方跨域域名有效

每个 dns-prefetch 都是一次真实 DNS 查询，浏览器并发上限通常为 6～10 个。无效查询既占系统资源，又可能干扰真实请求。

✅ 值得加：//cdn.example.com（图片/JS/CSS 真实加载）、//api.example.com（首屏后立即 fetch）、//hm.baidu.com（统计 SDK 初始化必发）
❌ 不该加：//your-site.com（同源，浏览器已缓存或自动优化）、//ad.doubleclick.net（广告联盟不稳定、常被拦截）、//admin.example.com（子域共享主域 DNS 缓存）
⚠️ 不支持通配符：//*.example.com 无效；也不必为 cdn1、cdn2 分别加，除非它们由不同权威 DNS 管理

不能和 preconnect 混用同一域名

preconnect 已隐含 DNS 解析，重复声明不仅无收益，还会让 dns-prefetch 被覆盖忽略。

✅ 同一域名只选一个：preconnect 更激进，适合确定高频使用且支持 HTTPS 的域名（如字体服务、首屏 API）
✅ 若只是“可能用到”或“用户触发后才发请求”，用 dns-prefetch 更稳妥（比如分享按钮背后的社交平台域名）
❌ 同时写两者：<link rel="dns-prefetch" href="https://api.example.com"> <link rel="preconnect" href="https://api.example.com"> —— 后者覆盖前者，前者冗余
⚠️ 移动端弱网下，过多 preconnect 可能抢占连接数；dns-prefetch 几乎无副作用，但别贪多，单页建议控制在 3–5 个以内

最易被忽略的一点：它不保证执行。浏览器有权忽略——比如隐私模式下被 uBlock Origin 屏蔽、服务端响应头设置了 X-DNS-Prefetch-Control: off、或 DNS 缓存未过期（TTL 默认 60–300 秒）。验证是否生效，得看 Chrome DevTools → Network → Timing 标签页里 DNS Lookup 是否提前出现，而不是只看 HTML 里有没有那行代码。