rel="preload"用于高优先级预加载关键资源，需指定as属性和crossorigin（字体必需），仅限阻塞关键路径的资源；搭配font-display:optional可避免FOIT/FOUT，JS模块需配合import或type="module"使用。
用 rel="preload" 显式声明关键资源
浏览器默认不会主动预加载非首屏但关键的资源（比如首屏用到的 font、script 或 style），必须靠 rel="preload" 提前“点名”。它和 rel="prefetch" 本质不同：前者是高优先级、强制立即获取，后者是低优先级、空闲时才加载。
-
preload必须指定as属性，否则浏览器无法正确设置请求优先级和 CORS 行为（例如） - 不支持
as="script"的老浏览器（如 Safari ≤15.4）会忽略该标签，需搭配onload回退逻辑或动态插入 - 不要对所有资源滥用
preload——它会抢占带宽，反而拖慢首屏渲染；只用于已确认阻塞关键路径的资源（如 LCP 图片、核心字体、模块脚本）
字体预加载要绕过 FOIT 和 FOUT
Web 字体加载失败或延迟会导致文字不可见（FOIT）或回退字体闪动（FOUT）。用 preload + font-display: optional 是目前最可控的组合。
@font-face {
font-family: 'Inter';
src: url('fonts/inter-var-latin.woff2') format('woff2');
font-display: optional;
}
-
crossorigin属性不能省——字体是跨域资源，漏掉会导致 preload 失效（Chrome 中表现为 “Failed to load resource” 且无网络请求） -
font-display: optional表示：若字体在 100ms 内未就绪，直接用系统字体渲染，不等；这比swap更激进，但能彻底避免 FOIT - 避免预加载未使用的字重或字符集（如只用 Regular，就别 preload Bold 或 CJK 全量包）
JS 模块预加载需配合 type="module" 和 async
预加载 ES 模块时，仅写 不够——浏览器不会自动执行，必须手动导入或通过 type="module" 触发。
- 推荐方式：
+ 在主模块中import { helper } from './utils.js';，让构建工具或运行时自然触发 - 如果想立即执行，改用
，此时preload可省略，因为type="module"默认异步且高优先级 - 注意
crossorigin：若模块内含fetch或import()跨域资源，必须加该属性，否则预加载会静默失败
检查预加载是否生效的三个关键点
很多预加载看似写了，实际没起作用。验证时重点看 Network 面板的 Initiator、Priority 和 Timing。
- 在 Chrome DevTools 的 Network 标签页，筛选出预加载资源，确认其
Initiator是preload，而非parser或script - 右键列头勾选
Priority，确保状态是Highest（as="font"或as="script"才会触发） - 对比不加
preload的 Waterfall：预加载资源的Start Time应明显早于 HTML 解析完成时间（即早于DOMContentLoaded）
最容易被忽略的是 as 值与资源类型不匹配（比如用 as="fetch" 加载图片），或者漏掉 crossorigin 导致预加载被丢弃——这两类问题在 Network 面板里往往“无声无息”。
