HTML代码中link引入DNS预解析机制-html教程-PHP中文网

rel="dns-prefetch"是dns预解析技术，用于让浏览器提前解析指定域名的ip地址以减少后续请求的dns延迟，仅支持协议+域名格式的href，须置于中，不支持路径或参数，且preconnect已隐含其功能。

html代码中link引入dns预解析机制

什么是 `rel="dns-prefetch"`？

它不是让浏览器提前加载资源，而是告诉浏览器：「这个域名接下来很可能要用，先去查下 DNS，别等真要发请求时才卡住」。本质是减少后续请求的 DNS 查询延迟，尤其对跨域资源（比如 CDN、第三方 JS、字体）有效。

`link` 标签怎么写才生效？

必须放在里，且 href 只能是协议+域名（不能带路径或参数），rel 必须严格为 dns-prefetch：

<link rel="dns-prefetch" href="https://cdn.example.com"><link rel="dns-prefetch" href="https://fonts.googleapis.com">

常见错误包括：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

href 写成 https://cdn.example.com/js/app.js（含路径 → 忽略）
漏掉协议，写成 //cdn.example.com（部分旧浏览器不识别）
放在里（多数浏览器仍会处理，但规范不保证，且可能延迟触发）

和 `preconnect` 有什么区别？

dns-prefetch 只做 DNS 解析；preconnect 会进一步建立 TCP 连接 + TLS 握手（如果用 HTTPS）。后者开销更大，但收益也更高：

只预解析 DNS → 用 dns-prefetch（适合不确定是否真会用、或仅需少量资源的域名）
确定马上要用（如首屏关键 API、核心 CDN）→ 优先用 preconnect，它已隐含 DNS 预解析
不要同时写两个：<link rel="dns-prefetch" href="..."> 和 <link rel="preconnect" href="...">（后者已覆盖前者，冗余）

实际部署要注意什么？

不是加得越多越好。DNS 查询本身有成本，且浏览器对并发 DNS 查询数有限制（通常 6–8 个）：

优先预解析「首屏必用」且「跨域」的域名，比如统计 SDK、字体服务、CDN 域名
避免预解析内网域名、localhost 或开发环境地址（生产环境不会用，白占名额）
Chrome 和 Firefox 支持良好；Safari 对 dns-prefetch 支持较弱（15.4+ 才开始支持，且行为不稳定），别依赖它做关键优化
无法通过 JavaScript 动态插入生效（必须 HTML 解析阶段就存在）

真正起作用的是那几行 <link>，但决定它们值的，是你对页面资源加载链路的真实分析 —— 不是从工具报告里抄一堆域名塞进去。