<link rel="preload">是最轻量高效的预加载方式，用于提前下载首屏关键资源，如critical.css、app-init.js、Web字体和hero图；需正确设置as和crossorigin属性，并保留原始引用标签以复用资源。
直接用 <link rel="preload"> 告诉浏览器：这些脚本和样式对当前页面至关重要，现在就要下，别等解析完再找——这是最有效、最轻量的预加载方式。
哪些资源该用 preload 加载
只预加载真正影响首屏渲染和交互的关键资源。典型包括：
- 首屏必需的 CSS 文件（如
critical.css），避免渲染阻塞 - 初始化页面逻辑的核心 JS（如
app-init.js或路由入口脚本） - 首屏用到的 Web 字体（如
Pacifico.woff2），需搭配crossorigin - 关键 hero 图像（
as="image"），可降低 LCP 时间
不建议预加载整包 bundle.js 或非首屏组件脚本——它们不属于“当前页面立即需要”的范畴。
正确写法与关键属性
必须同时指定 as 和（必要时）crossorigin，否则预加载可能静默失效：
立即学习“Java免费学习笔记（深入）”；
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
-
as="script"：用于 JS，浏览器会以高优先级获取，但不会执行 -
as="style"：用于 CSS，配合<link rel="stylesheet">使用，确保样式可用即用 -
as="font"+crossorigin="anonymous"：字体跨域请求必需，缺一不可 -
as="image"+fetchpriority="high"（可选）：进一步提示首屏图优先
示例：
<link rel="preload" href="critical.css" as="style"><link rel="preload" href="app-init.js" as="script">
<link rel="preload" href="fonts/Pacifico.woff2" as="font" type="font/woff2" crossorigin="anonymous">
配合常规引用，避免重复加载
preload 只负责“提前下载”，不负责“应用”。所以仍需保留原始引用标签：
- CSS 要继续用
<link rel="stylesheet" href="critical.css"> - JS 要继续用
<script src="app-init.js"></script>或type="module"引入
浏览器会复用已预加载的资源，不会重新请求。若 preload 的 URL 与后续引用不完全一致（含查询参数、大小写、路径斜杠等），将视为不同资源，导致重复下载。
动态预加载（按需触发）
当关键资源路径由运行时决定（如用户语言、设备类型），可用 JS 动态插入：
- 创建
link元素，设置rel="preload"、as、href - 添加到
document.head，越早越好（例如在<head>内立即执行的 script 中） - 可监听
load事件做后续处理，但注意：preload 不保证执行时机，仅保证下载就绪
示例：
const link = document.createElement('link');link.rel = 'preload';
link.as = 'script';
link.href = `/js/app-${lang}.js`;
document.head.appendChild(link);
