preload是浏览器在HTML解析早期就发起的高优先级资源请求，用于预加载当前页面必需的关键资源（如首屏字体、JS、CSS），使其尽早进入缓存以减少渲染阻塞；它不是prefetch（不用于未来页面）、也不等同于懒加载，且必须通过<link rel="preload">配合as属性声明资源类型才能生效。
preload 是什么，不是什么
它不是 <link rel="prefetch">，也不等同于懒加载；它是浏览器在解析 HTML 时就发起的高优先级资源请求，目标是让关键资源（比如首屏用到的字体、JS、CSS）尽早进入缓存，减少渲染阻塞。如果你把 preload 用在非首屏、非关键路径的资源上，反而会抢带宽、拖慢真正需要的东西。
怎么写一个有效的 preload link 标签
必须用 <link>，且必须包含 rel="preload" 和 as 属性——后者告诉浏览器资源类型，直接影响优先级和是否允许跨域加载。漏掉 as，浏览器会当成普通 fetch，不提升优先级，甚至可能被忽略。
常见写法示例：
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/js/main.js" as="script"> <link rel="preload" href="/styles/base.css" as="style">
-
as="font"必须搭配crossorigin，否则字体不会加载（即使路径正确也会静默失败） -
as="script"和as="style"不需要crossorigin，除非资源跨域且服务端没配 CORS -
type属性可选，但建议加上，尤其对字体或模块脚本，能帮浏览器跳过 MIME 类型探测
preload 容易踩的坑
最常出问题的是「预加载了，但没用上」——浏览器发现后续没有对应的 <script src> 或 @font-face 引用，就会丢弃该资源，白下一次。
立即学习“前端免费学习笔记（深入）”；
- 确保
href路径和实际使用的路径完全一致（包括查询参数，?v=1.2和?v=1.3被视为不同资源） - 不要对内联
<script>或<style>做 preload——没意义，它们不走网络请求 - 避免 preload 图片：除非是
<img>的src确定会在几秒内解析并渲染，否则大概率被丢弃；改用fetchpriority="high"或原生loading="eager" - Webpack/Vite 构建产物带 hash？确保 preload 的
href和最终生成的文件名同步，否则 404 或缓存错乱
如何验证 preload 是否生效
打开 Chrome DevTools → Network 标签页，刷新页面，筛选 Initiator 列为 parser 的请求，再看对应资源的 Priority 是否为 Highest 或 High（不是 Low 或 Medium）。如果 Priority 是 Low，基本说明 as 没写对，或者浏览器没识别出用途。
还可以在控制台运行：performance.getEntriesByType("navigation")[0].transferSize 对比有无 preload 时的数值，但更直接的是看 Waterfall 时间轴里资源是否提前发起。
注意：Safari 对 as="font" 的支持较晚（iOS 15.4+），老版本会忽略；Edge 也曾在某些版本里把 as="script" 当成普通 fetch，所以关键字体/JS 的 preload 最好配合 fallback 逻辑。
