link rel="preload"仅对首屏急需但浏览器发现太晚的资源有效，必须置于最前、正确声明as属性且路径严格一致，否则静默失效或拖慢首屏。
link rel="preload" 不是加了就快，只对“当前页首屏立刻要用、但浏览器发现太晚”的资源有效；写错位置、漏 as、路径不一致，它就静默失效，甚至拖慢首屏。
必须放在
浏览器只在 HTML 解析初期（parser 阶段）识别 link rel="preload"，一旦开始构建 DOM 或遇到 ，后续的 preload 标签就被忽略。
- ✅ 正确位置：
<meta charset="utf-8">后、<title></title>前 - ❌ 错误位置：跟在
<link rel="stylesheet">后面、<script></script>块之后、内 - ❌ 动态插入无效：用
document.createElement('link')+appendChild创建的 preload，Initiator 显示为(Other)，Priority 是Low - ⚠️ 多个 preload 按书写顺序发起请求，但优先级由
as决定，不是靠“谁写在前面谁先跑”
as 属性漏写或写错，等于没写
as 不是可选提示，它强制告诉浏览器资源类型，从而决定请求头、CORS 策略、缓存分区和网络优先级。填错或缺失，浏览器直接当普通 fetch() 处理，Priority 降为 Low，Network 面板里 Initiator 显示为 (Other)。
- CSS 文件 → 必须
as="style"（不是"stylesheet"） - 字体（.woff2/.woff）→
as="font"+crossorigin（同源也必须加，缺一不可） - JS 脚本 →
as="script"（模块脚本也用这个，不用配type="module"） - 图片 →
as="image"（as="img"或as="picture"全部无效） - JSON 接口 →
as="fetch"，且响应头需含Access-Control-Allow-Origin
预加载后怎么让资源真正生效？别只下载不应用
rel="preload" 只负责下载并缓存，不会自动解析或执行。比如预加载 CSS 后不手动切换 rel，它就一直躺在缓存里，页面照样 FOUC。
- CSS：用
onload="this.onload=null;this.rel='stylesheet'"，必须加this.onload=null防重复触发 - JS：无需额外操作，只要后续有相同
href的<script src></script>或import()，就会复用缓存 - 字体：加载完自动进 font loader，但若漏
crossorigin，Chrome/Safari 会丢弃已下载内容，表现为 FOIT - ⚠️ 路径必须完全一致：大小写、斜杠、查询参数（如
?v=1.2）差一点，缓存就不复用 - ⚠️ 别对已用
<link rel="stylesheet">声明过的 CSS 再 preload —— 浏览器可能跳过或触发二次请求
哪些该 preload，哪些纯属浪费带宽
它抢占并发连接和带宽，瞎加反而拉低 LCP。只干预那些浏览器“看不见但首屏马上要”的资源。
- ✅ 该用：
@font-face引用的字体（尤其 .woff2）、内联<style></style>中的background-image、<script type="module"></script>后紧跟的主 chunk（如app.js）、首屏<picture></picture>中关键<source></source> - ❌ 别碰：
analytics.js、非首屏轮播图 JS、第三方 widget、懒加载模块、<img src>（不如用fetchpriority="high"） - ⚠️ 特别注意：不要用
rel="preload"做跨页预加载——它只对当前页有效；下一页资源请用rel="prefetch"
最容易被忽略的是 as 和 crossorigin 的强绑定关系，尤其是字体场景：漏掉 crossorigin，控制台不报错，Network 里请求看似成功，但字体就是不渲染——FOIT 问题往往卡在这里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
