preconnect比dns-prefetch更有效，因其提前完成dns解析、tcp握手和tls协商，使后续请求可直接复用连接，节省100–300ms延迟；而dns-prefetch仅执行dns查询。
直接在 HTML 的 中添加预解析标签，就能让浏览器提前开始 DNS 查询或建立连接，从而减少后续资源加载的等待时间。关键不是“能不能用”，而是“什么时候用、用对哪个域名”。
dns-prefetch：提前查域名对应的 IP 地址
适用于你确定会用到、但尚未发起请求的第三方域名（比如 CDN 域名、统计服务、字体服务等）。浏览器会在空闲时悄悄发起 DNS 查询，把结果缓存起来。
- 写法简单：
<link rel="dns-prefetch" href="//cdn.example.com"> - 注意只填协议+域名，不带路径（
//cdn.example.com✅，//cdn.example.com/js/app.js❌） - 多个 CDN 域名可分别声明，例如同时加速主站静态资源和字体服务：
<link rel="dns-prefetch" href="//static.example.com"><link rel="dns-prefetch" href="//fonts.googleapis.com">
preconnect：提前建立 TCP + TLS 连接
比 dns-prefetch 更进一步——不仅查 IP，还提前完成 TCP 握手和 TLS 协商（HTTPS 站点），真正省掉后续请求的“连接开销”。适合高频、关键的外部域名（如主 CDN 或 API 域名）。
- 写法：
<link rel="preconnect" href="https://cdn.example.com"> - 必须带完整协议（
https://），否则浏览器可能忽略 TLS 预连 - 慎用：每个
preconnect会占用一个连接池名额，过多反而影响其他资源；建议仅用于 2–3 个最核心的外部域名 - 可配合
crossorigin属性处理跨域资源（如字体、模块脚本）：<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
preload + preconnect 组合提升 JS 加载效率
对于关键 JS 文件（如首屏依赖的框架或初始化脚本），单靠预解析不够。可以组合使用：
- 先用
preconnect连上 CDN 域名 - 再用
preload提前拉取具体文件（注意as="script"和fetchpriority="high"）：<link rel="preconnect" href="https://cdn.example.com"><link rel="preload" href="https://cdn.example.com/app.12345.js" as="script" fetchpriority="high"> - 这样浏览器能在解析 HTML 阶段就启动连接并下载，避免渲染阻塞
验证是否生效的小技巧
打开 Chrome DevTools → Network 标签页 → 刷新页面 → 查看每条请求的“Timing”面板：
- 如果某域名的 DNS 查询时间（DNS Lookup）明显变短或为 0ms，说明
dns-prefetch生效 - 如果 TCP 连接（Connect）和 SSL 协商（SSL）阶段耗时大幅下降，甚至合并显示为“reused”，说明
preconnect起作用 - 也可以在控制台运行
performance.getEntriesByName("dns")查看 DNS 解析记录
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
