预连接和预加载可显著提升JavaScript性能。通过preconnect提前建立跨域连接，减少DNS、TCP、TLS延迟；preload强制优先加载关键JS资源，避免发现过晚；prefetch在空闲时预载后续页面资源，prerender后台渲染整个页面；结合动态import实现按需加载与执行，优化首屏速度与用户体验。
在现代网页开发中，JavaScript 的加载和执行效率直接影响页面性能和用户体验。通过合理的资源预加载与预连接策略，可以显著减少网络延迟、加快关键资源获取速度，从而提升整体加载性能。
预连接（Preconnect）：提前建立跨域连接
当页面需要从第三方域名（如 CDN、API 服务）加载资源时，浏览器需先进行 DNS 解析、TCP 握手和 TLS 协商，这些步骤可能带来数百毫秒的延迟。预连接允许我们提前建立这些连接，避免等待。
使用 <link rel="preconnect"> 告诉浏览器尽早连接到目标域名：
<link rel="preconnect" href="https://cdn.example.com">如果需要认证（如 CORS 请求），加上 crossorigin 属性：
立即学习“Java免费学习笔记（深入）”；
<link rel="preconnect" href="https://api.service.com" crossorigin>适合场景：
- 加载字体文件的 CDN
- 外部脚本或库（如 Google Analytics、React 从 unpkg）
- API 接口域名（尤其是首屏数据请求）
预加载（Preload）：优先加载关键 JavaScript
预加载用于强制浏览器提前获取当前页面必需的关键资源，即使它们尚未被解析到。这对异步加载但对首屏功能至关重要的 JS 文件特别有用。
使用 <link rel="preload"> 并指定 as="script"：
<link rel="preload" href="critical.js" as="script">优势在于：
- 比普通 script 标签更早触发下载
- 可配合媒体查询，按条件预加载
- 避免“发现得晚”导致的执行延迟
注意不要滥用，否则会抢占其他资源带宽。
预读取（Prefetch）与预渲染（Prerender）：为后续导航做准备
对于用户可能跳转的下一个页面，可以使用 prefetch 在空闲时预加载其 JavaScript 资源：
<link rel="prefetch" href="/next/page.js">它优先级低，不影响当前页面性能。而 prerender 更进一步，相当于在后台加载整个页面：
<link rel="prerender" href="/next/page.html">适用于确定性高的导航路径，比如分步表单的下一步。
结合动态 import 与 preload 实现精细控制
现代项目常用动态导入拆分代码。可结合 preload 提升关键模块的加载速度：
在 HTML 中预加载：
<link rel="preload" href="feature-bundle.js" as="script">在 JS 中按需加载：
if (shouldLoadFeature) {
import('./feature.js');
}
这样既保证了提前下载，又实现了按需执行。
基本上就这些。合理使用 preconnect 和 preload 能有效缩短 JavaScript 加载时间，尤其在弱网环境下效果明显。关键是识别出核心资源和高频跨域请求，针对性优化，避免过度预加载造成浪费。
