preload不是加了就快，而是加对了才快——它只对浏览器“发现太晚但首屏立刻要用”的资源有效；必须置于内且紧贴后，同时准确指定as属性（如as="font"须配crossorigin），否则退化为普通fetch、priority降为low、加载失效。
preload 不是加了就快，而是加对了才快——它只对浏览器“发现太晚但首屏立刻要用”的资源有效；加错或漏配 as/crossorigin，等于白写。
preload 必须放在
浏览器解析到 <link rel="preload"> 就会立即发起请求，不等 DOM 构建完成。放在 或 JS 动态插入的 <link> 完全无效。
- ✅ 正确位置：紧贴
<meta charset>后、<title></title>前 - ❌ 错误位置：跟在
<link rel="stylesheet">下方，或用document.createElement('link')插入 - ⚠️ 注意：
preload不阻塞渲染，但会提升优先级——如果放得太晚，关键字体或首屏图可能已错过最佳加载窗口，延迟 200ms+ 是常态
as 属性漏写或写错，preload 就退化成普通 fetch
as 不是可选装饰，它直接决定请求头、CORS 策略、缓存分区和优先级。漏写或类型不匹配，Priority 列会显示为 Low，和没写一样。
-
as="font"→ 必须同步加crossorigin（哪怕同源），否则字体加载完也不会应用 -
as="style"→ 必须配onload="this.onload=null;this.rel='stylesheet'"，否则只下载不生效 -
as="script"→ 若后续仍用<script src></script>引同一 URL，能复用；但若有integrity，preload也得带上，否则缓存不匹配 -
as="image"→ 不支持srcset或sizes，只适合确定尺寸/格式的单图；对普通<img src>无效
哪些资源真该用 preload，哪些千万别碰
浏览器只能自动发现 <img>、<script src></script>、<link rel="stylesheet"> 里的资源。以下几类常被“藏”着，等解析完 CSS 或 JS 才暴露，导致 FOIT、FOUC 或首屏图延迟：
- ✅ 该用：
@font-face引用的字体（尤其 .woff2）、内联<style></style>里的background-image、紧跟<script type="module"></script>后的主 chunk、首屏<picture></picture>中关键<source></source> - ❌ 别碰：
analytics.js、非首屏轮播图、第三方 widget 脚本、懒加载模块——它们不参与首屏渲染，纯属带宽干扰 - ⚠️ 特别注意：不要对
<img src>加preload，不如直接设fetchpriority="high"更简单有效
验证 preload 是否真起作用，不能只看 HTML 有没有那行
打开 Chrome DevTools → Network 面板，筛选条件要具体：
- 按
Initiator列筛选preload（不是parser或script） - 检查
Priority列：应为Highest（as="font"）或High（as="style"），不是Low - 对比未加
preload时的Time：理想可提前 200–600ms 开始下载，弱网下收益更明显 - ⚠️ 关键盲点：404 的
href仍会发请求，但不会触发 error 事件，容易被忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
