rel="preload"是当前页关键资源提速的唯一可靠手段，但必须写在<head>中<meta charset>后<title>前、as属性精准匹配类型（如as="font"需crossorigin）、路径完全一致，否则降级为Low优先级fetch且无效。
JavaScript 前端资源预加载（Preload）不是靠 JS 本身“执行”出来的，而是通过 HTML 声明或 JS 动态注入 <link rel="preload"> 标签来触发浏览器提前获取资源。关键在于告诉浏览器：这个资源当前页面马上要用，优先下载，但不立即执行。
直接在 HTML 中声明 preload
最简单、最推荐的方式是在 <head> 中静态写入 <link> 标签。浏览器在解析 HTML 时就能识别并启动高优先级加载：
-
必须指定
as属性：它让浏览器知道资源类型，从而正确设置请求头、CSP 策略和加载优先级。例如：as="script"、as="style"、as="font"、as="image"； -
跨域字体需加
crossorigin：否则会因 CORS 失败而无法使用，比如：<link rel="preload" href="fonts/inter.woff2" as="font" type="font/woff2" crossorigin>； - 避免滥用：只对首屏渲染强依赖的资源（如关键 CSS、首屏 JS、自定义字体）使用，否则会抢占带宽、拖慢真正急需的资源。
用 JavaScript 动态插入 preload
适用于运行时判断才确定要加载的资源（比如用户进入某模块前预热依赖）：
- 创建
link元素，设置rel="preload"、as和href； - 追加到
document.head即可生效； - 可监听
load事件做后续处理（注意：preload 只下载不执行，JS 文件仍需手动createElement('script')才执行）：
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'script';
link.href = '/assets/chart-module.js';
document.head.appendChild(link);
link.addEventListener('load', () => {
console.log('chart-module.js 已缓存就绪');
});
Webpack 构建时自动注入 preload
适合工程化项目，避免手动维护大量 link 标签：
立即学习“Java免费学习笔记（深入）”；
- 安装插件：
npm install --save-dev preload-webpack-plugin； - 在 webpack 配置中启用，按 chunk 名称或正则匹配自动注入：
new PreloadWebpackPlugin({ include: ['app', 'vendor'], as: 'script' })； - 支持细粒度控制：用
fileWhitelist匹配资源类型，priority调整插入顺序，rel: 'preload'或'prefetch'分开配置。
配合缓存与加载时机优化
preload 本身只是“下载”，要真正提效，还需协同其他机制：
- 搭配
max-age强缓存 + 内容哈希文件名（如main.a1b2c3.js），确保预加载资源能被复用； - 对下一页可能用到的资源（如用户悬停导航项时），改用
rel="prefetch"，它优先级更低、在空闲时加载，更稳妥； - 对第三方域名（CDN、API）用
<link rel="preconnect">提前建立连接，减少 DNS 和 TLS 开销。
