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