加可提前触发DNS查询，仅对页面真实请求的第三方域名有效，乱加反而拖慢首屏；需确保域名高频使用、确有资源加载，且href必须为//开头的纯主机名。
直接说结论：在 HTML 的 里加 <link rel="dns-prefetch" href="//example.com"> 就能触发浏览器提前做 DNS 查询，但只对真正会用到的第三方域名有效，乱加反而拖慢首屏。
哪些域名值得加 dns-prefetch
不是所有外部域名都适合预解析。关键看两点：是否确定会在当前页面发起请求、是否属于高频或高延迟环节。
- CDN 域名（如
//cdn.example.com、//img0.site.com）—— 页面图片、JS、CSS 真实从这些域名加载 - API 接口域名（如
//api.site.com）—— 首屏后立即发起的 AJAX 请求目标 - 字体服务（如
//fonts.googleapis.com）——@import或<link rel="stylesheet">明确指向该域名 - 统计/埋点域名（如
//hm.baidu.com、//s95.cnzz.com）—— 脚本初始化时必然请求 - 避免添加未使用的域名（比如复制京东模板里的
//img10.360buyimg.com，但你压根没用京东图床）
href 写法必须用 // 开头，不能带协议
写成 http:// 或 https:// 会导致协议不匹配失败；写成完整 URL（含路径）会被浏览器忽略，只认主机名部分。
- ✅ 正确：
<link rel="dns-prefetch" href="//cdn.site.com"> - ❌ 错误：
<link rel="dns-prefetch" href="https://cdn.site.com"> - ❌ 错误：
<link rel="dns-prefetch" href="//cdn.site.com/js/main.js"> - ⚠️ 注意：如果目标域名只支持 HTTPS，但当前页是 HTTP，
//会降级为 HTTP 协议导致失败——这种场景应改用preconnect并显式声明crossorigin
放在 越靠前越好，但别干扰关键渲染
浏览器解析到 <link rel="dns-prefetch"> 就会立刻排队做 DNS 查询，所以它得比任何依赖它的资源更早出现。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 推荐位置：紧跟
<meta charset>和<title></title>后，早于<link rel="stylesheet">和<script></script> - 不要塞进模板 footer 或动态 JS 插入 —— 那时候 DNS 查询已无意义
- 不要和
preload混用同一域名却不同顺序：比如先preload图片再dns-prefetch，浏览器可能还没查完 DNS 就发了请求，白忙一场 - 移动端弱网下，过多
dns-prefetch可能抢占 DNS 查询队列，建议单页控制在 3–5 个以内
怎么验证它真的生效了
光加标签不等于起作用。DNS 预解析是“提示”，不是强制指令，浏览器有权忽略。
- Chrome DevTools → Network 标签页 → 切换到 “DNS” 类型过滤 → 刷新页面，看是否有对应域名的 DNS 解析记录，耗时应接近 0ms（说明已缓存）或明显短于后续真实请求的 DNS 时间
- 对比开启前后 Waterfall 中首个跨域资源的「DNS Lookup」阶段：下降 20ms+ 才算有收益
- 注意：Firefox 和 Chrome 默认会对页面中已出现的外链自动做隐式预解析，所以如果你只加了用户点击才跳转的链接域名，
dns-prefetch才是唯一手段 - 某些企业内网或定制浏览器会禁用该功能，可通过
document.createElement('link').relList.supports('dns-prefetch')检测支持性（但实际没必要运行时判断）
最容易被忽略的一点：dns-prefetch 不解决 TCP 连接、TLS 握手、HTTP 请求排队等问题，它只管 DNS 这一环。如果你的瓶颈在 TLS 或后端响应，加再多 dns-prefetch 也看不出变化。
