如何在 HTML 中利用 link 标签的 rel="dns-prefetch" 属性缩短域名解析时间-html教程-PHP中文网

rel="dns-prefetch"是仅提前解析跨域域名dns的轻量优化，能为后续请求省去几十毫秒dns查询时间；它不加速首屏、不建连、不握手，必须用https://完整协议写法、置于靠前位置，且仅对实际使用的第三方域名有效。

$如何在 html 中利用 link 标签的 rel=\$

rel="dns-prefetch" 是什么，真的能加快页面加载吗

它不能“加快”当前页面的 DNS 解析，而是提前为后续可能访问的域名做解析准备——只对跨域资源有效，且必须是浏览器尚未解析过的域名。如果页面里有 <link rel="dns-prefetch" href="https://cdn.example.com">，浏览器会在空闲时发起 DNS 查询，等真正请求该 CDN 上的图片或 JS 时，DNS 阶段就省掉了。

常见误判：给当前页面同域地址加 dns-prefetch（比如 https://mysite.com）毫无意义——主文档加载前该域名早已解析完毕；给未实际使用的域名预解析，反而浪费资源、增加 DNS 请求压力。

怎么写才生效：href 值必须是完整协议+域名，且不能带路径

href 值不是 URL，只是用于 DNS 查询的 origin。以下写法全部无效：

href="//cdn.example.com" —— 缺少协议，多数浏览器忽略
href="https://cdn.example.com/js/app.js" —— 带路径，会被截断但不报错，实际行为不可靠
href="cdn.example.com" —— 缺少协议和 https:// 前缀，解析失败

正确写法只有这一种：<link rel="dns-prefetch" href="https://cdn.example.com">。多个域名就写多条 <link>，放在里越早越好（但不要早于 <meta charset>）。

和 preconnect 的区别：什么时候该用哪个

dns-prefetch 只做 DNS 查询；preconnect 会进一步建立 TCP 连接甚至 TLS 握手。后者开销更大，但收益也更明显——尤其对 HTTPS 资源。

优先选 preconnect 的场景：

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

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

下载

确定要加载的第三方资源（如 Google Fonts、CDN JS）
目标域名支持 HTTP/2 或 HTTP/3
页面中该域名资源占比高、加载关键路径上

仍用 dns-prefetch 的场景：

目标域名不支持 HTTPS（极少见）
只是“可能”用到，比如用户点击后才加载的模块所依赖的域名
担心 preconnect 占用过多连接数（Chrome 默认限制 6 个并发 preconnect）

别混用：<link rel="preconnect" href="https://fonts.googleapis.com"> 已包含 DNS 查询，再加一条 dns-prefetch 是冗余的。

验证是否生效：看 Network 标签里的 Timing 面板

打开 Chrome DevTools → Network → 找一个来自预解析域名的请求（比如 https://cdn.example.com/image.png）→ 点击它 → 切到 Timing 标签页。如果 DNS 查询时间（domainLookupStart 到 domainLookupEnd）显示为 -1 或接近 0ms，说明预解析成功；如果数值正常（比如 20–200ms），说明没生效或没触发。

排查要点：