文章内容
2025/12/8 0:16:39,作 者: 黄兵
dns-prefetch 的对页面的优化
页面有一个资源：
<script src="https://cloud-1.us-west.obs.markbot.net/js/plugins-96178d2fd0a7f47cc9ae.bundle.js"></script>
如果需要尽快加载，我们可以这样做：
针对资源 URL https://cloud-1.us-west.obs.markbot.net/...，我们直接提取其主机名（Domain Name）来编写 dns-prefetch。
应该这样写：
或者（如果网站只使用 HTTPS）：
💡 关键点解释
提取域名： DNS 预解析（DNS Prefetching）只需要域名，不需要具体的路径（即不需要
/js/plugins...那部分）。完整 URL:
https://cloud-1.us-west.obs.markbot.net/js/plugins-96178d2fd0a7f47cc9ae.bundle.js主机名:
cloud-1.us-west.obs.markbot.net
协议写法 (
//vshttps://)：//(推荐): 这叫做“协议相对 URL”。如果您的网站同时支持 HTTP 和 HTTPS，使用//会让浏览器自动匹配当前页面的协议，这通常是最稳妥的写法（例如您的 Google Analytics 示例就用了这个）。https://: 如果您的站点是全站 HTTPS，直接写死协议也是完全可以的。
🚀 进阶建议：考虑使用 Preconnect
如果这个 .js 文件对您的页面渲染非常重要（通常 bundle.js 都是核心文件），您可以考虑使用 preconnect 来替代或配合 dns-prefetch。
DNS-Prefetch: 只解析域名 IP（仅 DNS 查询）。
Preconnect: 解析域名 + 建立 TCP 连接 + 完成 TLS 握手（更彻底的预连接）。
更高效的写法：
(注意：dns-prefetch 作为后备方案保留，以兼容不支持 preconnect 的旧浏览器)
评论列表