DNS预解析、预连接和预加载可减少资源延迟。1. DNS预解析通过提前解析第三方域名缩短解析时间；2. 预连接完成DNS、TCP和TLS握手，加快关键资源请求；3. preload高优先级加载当前页关键资源，prefetch低优先级预载后续页面内容，合理组合使用能显著提升页面性能。
在现代网页性能优化中，JavaScript 的 DNS 预解析、预连接和预加载是关键的前端优化手段。它们能有效减少资源加载延迟，提升页面响应速度，尤其是在涉及多个外部域名或关键脚本依赖时效果显著。
1. DNS 预解析（DNS Prefetch）
当页面需要从第三方域名加载资源（如 CDN 上的 JS、字体等），浏览器必须先进行 DNS 查询，将域名解析为 IP 地址。这个过程可能耗时几十到几百毫秒。
DNS 预解析通过提前解析未来可能用到的域名，避免阻塞主请求流程。可以在 HTML 中使用如下标签：
<link rel="dns-prefetch" href="//cdn.example.com">这样浏览器会在空闲时提前完成 DNS 解析，等真正发起请求时可直接进入 TCP 连接阶段。
立即学习“Java免费学习笔记（深入）”；
2. 预连接（Preconnect）
预连接比 DNS 预解析更进一步，它不仅解析 DNS，还尝试建立 TLS 连接和 TCP 握手，大幅缩短后续请求的等待时间。
适用于确定会从某个域加载关键资源的情况。例如：
<link rel="preconnect" href="https://api.example.com">
特别适合用于 API 接口、WebFont 或重要脚本所在的域名。相比 DNS 预解析，预连接节省了 TCP 和 TLS 协商的时间，在 HTTPS 场景下优势明显。
3. 预加载（Prefetch / Preload）
预加载用于提前获取当前页或下一页面可能需要的资源。其中 preload 是高优先级，告诉浏览器该资源即将被使用，应尽快加载。
比如延迟加载的 JavaScript 模块或关键字体：
<link rel="preload" href="critical.js" as="script">而 prefetch 是低优先级的，用于预测用户下一步行为，如预加载下一页的 JS 或图片：
<link rel="prefetch" href="next-page-bundle.js">合理使用 preload 可避免关键 JS 被阻塞在解析阶段，加快执行时机。
基本上就这些。通过组合使用 DNS 预解析、预连接和预加载，可以系统性地压缩网络延迟，尤其对依赖多域名、异步脚本或动态导入模块的应用帮助很大。关键是根据实际资源依赖关系精准设置，避免无效预加载造成带宽浪费。
