用于提前加载首屏关键资源，需严格满足href准确、as匹配类型、字体加crossorigin、位置在head顶部四要素；模块化项目应改用modulepreload。

用 `` 加载关键资源，核心是让浏览器在解析 HTML 早期就发起请求，把首屏必需的资源“抢”进加载队列，不等 DOM 解析到对应标签才开始拉取。它不执行、不阻塞、只提前下载，等真正需要时立刻可用。

哪些资源适合 preload

只预加载当前页**马上要用、且影响首屏渲染或交互**的资源，比如：

• 首屏字体（.woff2/.ttf）：避免 FOIT/FOUT，必须加 crossorigin
• 关键 CSS（如 critical.css）：配合 onload="this.rel='stylesheet'" 动态挂载
• 首屏 JS Bundle（main.js）：SPA 入口脚本，as="script" 是硬性要求
• Hero 图片或大背景图：as="image"，避免懒加载导致白屏延迟
• WebAssembly 模块或首屏 JSON 数据：as="fetch" 或 as="worker"

写法必须规范，否则等于没写

以下四项缺一不可，错一个就可能降级为普通 fetch，甚至重复请求：

• href 必须准确：路径要和后续实际引用完全一致（含 hash、查询参数）
• as 属性不可省略且必须匹配类型：字体用 as="font"，JS 用 as="script"，CSS 用 as="style"——写错或留空会导致优先级变 Low
• 字体必须加 crossorigin：哪怕同源，也要写 crossorigin 或 crossorigin="anonymous"，否则字体加载失败
• 位置必须靠前：放在 最顶部，早于所有 <script></script> 和 <link rel="stylesheet">

模块化项目用 modulepreload，别混用

如果你的主脚本是 <script type="module"></script>，且内部有 import 链（比如 import { render } from './core.js'），单靠 preload 只能下 main.js，子模块仍要等解析后才触发请求。

响应式烟草公司HTML5网站模板

响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

这时应改用：

• <link rel="modulepreload" href="main.js">：自动递归预取所有静态 import 的依赖
• 不写 as 属性（写了会被忽略）
• href 必须和 import 语句中的路径完全一致（包括构建后的 hash）
• 所有 modulepreload 标签必须出现在首个 <script type="module"></script> 之前

避开常见坑

这些操作会让 preload 失效甚至拖慢页面：

• 硬编码带 hash 的路径：Webpack/Vite 构建后文件名变化，HTML 中写的 preload 就 404 —— 应由构建插件动态注入真实路径
• 漏写 integrity 值：如果 script 用了 integrity，preload 标签也必须带相同值，否则缓存不复用
• 误用于跨页资源：preload 只对当前页有效；想预加载下一页内容，该用 rel="prefetch"
• 滥用太多 preload：一次预加载超过 4–5 个资源，会抢占带宽，反而挤占首屏关键资源的通道