HTML5如何预加载关键资源_HTML5资源预取技巧【技巧】

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 面板里往往“无声无息”。