JavaScript 加载优化怎么利用 DNS 预解析和预连接加速网络请求-js教程-PHP中文网

dns-prefetch和preconnect通过提前完成dns查询、tcp握手及tls协商来加速跨域js加载；前者适用于可能用到的第三方域名，开销小；后者适用于确定加载的关键js域名，会占用连接槽位，需协同defer或type="module"使用。

javascript 加载优化怎么利用 dns 预解析和预连接加速网络请求

JavaScript 加载优化中，DNS 预解析（dns-prefetch）和预连接（preconnect）不是直接加速 JS 执行，而是为 JS 文件所在的跨域域名“抢跑”网络准备阶段，把 DNS 查询、TCP 握手甚至 TLS 协商提前完成，让后续 <script src="https://cdn.example.com/app.js"></script> 这类请求真正发出时，几乎能立刻发数据，节省 200–600ms。

什么时候该用 dns-prefetch

适合那些“可能用到、但不确定是否立即加载”的第三方 JS 域名，比如分析脚本、广告 SDK、备用 CDN 等。它只做域名解析，开销极小，不占浏览器并发连接数：

写法必须是 <link rel="dns-prefetch" href="//cdn.example.com">（协议省略或 HTTPS 均可，但不能带路径或端口）
放在 <meta charset> 和 <title></title> 后、首个 CSS 或 JS 标签前，确保浏览器尽早执行
多个页面共用同一域名时，避免重复声明——重复不会报错，但会触发多余 DNS 查询

什么时候该用 preconnect

适合你明确知道首屏 JS 一定会从某个跨域地址加载的场景，例如字体服务、核心 CDN 上的 vendor.js 或 runtime.js。它会真实建立 TCP+TLS 连接，占用一个连接槽位：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

必须是 HTTPS 域名（HTTP 不支持），且确认该域名稳定可用，否则空耗连接资源
同一域名不要同时写 dns-prefetch 和 preconnect，后者会覆盖前者，前者纯属冗余
建议最多用 1–2 个 preconnect，优先给最关键的 JS 资源域名，比如 https://js.example.com

怎么配合 JS 加载策略一起生效

单独加 preconnect 没用，得和 JS 的加载方式协同：

对关键 JS，用 <script src="..." defer></script> 或 type="module"，让 HTML 解析与 JS 下载并行，此时 preconnect 已就绪，下载延迟大幅降低
避免在 JS 里动态创建 script 标签再设置 src——这时 preconnect 已错过最佳时机，效果打折
如果 JS 是通过 import() 动态导入的，可在模块调用前，用 JS 主动触发 document.createElement('link') 插入 preconnect，但需谨慎控制时机和数量