HTML5资源预加载技巧分享

本文深入解析了HTML5中rel="preload"这一关键性能优化技术，重点讲解如何精准预加载阻塞首屏渲染的核心资源（如LCP图片、Web字体、ES模块脚本），强调必须正确设置as属性与crossorigin（尤其字体场景）、避免滥用以防止带宽抢占，并结合font-display:optional彻底规避FOIT/FOUT问题；同时指出JS模块需配合type="module"或显式import才能真正生效，最后提供Chrome DevTools中验证预加载是否成功落地的三大实操检查点——让性能优化从“写了”真正走向“起效”。

用 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 是目前最可控的组合。

<link rel="preload" href="fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin>
@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';，让构建工具或运行时自然触发
• 如果想立即执行，改用