rel="preload"必须配对正确as属性才生效，漏写、错写或不匹配会导致浏览器静默忽略；as="font"需加crossorigin，as="style"需onload切换rel，否则仅下载不解析。
rel="preload" 不是加了就生效，as 属性写错、漏写、或跟资源实际用途不匹配，浏览器直接当没看见——连请求都不会发。
as 属性必须填对，否则等于没写
浏览器靠 as 决定是否启用 CORS、走哪个缓存池（script cache / CSSOM / font loader）、用什么优先级排队。它不是提示，是强制开关。
-
as="style"：对应<link rel="stylesheet">引入的 CSS，不能写成as="stylesheet" -
as="script"：JS 脚本，包括模块脚本（type="module"），但不能写成as="javascript"或as="js" -
as="font"：WOFF2/WOFF 字体，必须搭配crossorigin（无值即可），否则 CORS 失败且无回退 -
as="image"：覆盖 JPEG/PNG/WebP/AVIF/SVG，但不适用于<video poster>场景 -
as="fetch"：用于关键 JSON 数据（如初始化配置），默认带凭据，跨域时需配crossorigin="anonymous"
字体预加载必须加 crossorigin，且不能带值
as="font" 会触发匿名 CORS 请求，但若 HTML 里没写 crossorigin，服务端响应头缺失 Access-Control-Allow-Origin，预加载就中断，且不会 fallback 到非 CORS 模式。
- ✅ 正确：
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin> - ❌ 错误：
<link rel="preload" href="/fonts/inter.woff2" as="font">（漏crossorigin） - ❌ 错误：
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin="use-credentials">（CDN 几乎都不支持带凭证的字体请求）
控制台报 CORS error，但页面可能只表现为 FOIT（空白字体），容易被忽略。
立即学习“前端免费学习笔记（深入）”；
预加载 ≠ 自动执行或解析
as="style" 只进 CSS 缓存，as="script" 只进 script 缓存，后续必须有对应的真实使用节点，才能复用。
-
as="style"需手动切换：onload="this.onload=null;this.rel='stylesheet'"，否则下载完也不会构建 CSSOM -
as="script"不会立即执行；只有当真实<script src>或import()触发时，才从缓存取并进入执行队列 - 路径必须完全一致（含查询参数）：预加载
main.js?v=1，但脚本引用的是main.js，就不会复用 - 写成
as="fetch"加载 JS，它只进 HTTP 缓存，不进 script cache，后续<script>仍会重新 fetch
别乱用，否则拖慢首屏
rel="preload" 是强制提前抓取，不是“锦上添花”，而是决定 LCP 是否超限的关键开关。用错反而挤占带宽、延迟真正关键请求。
- 只对当前页面首屏强依赖资源用：关键 CSS、Web Font、内联前 JS、首屏
poster图片 - 避免把懒加载模块、非首屏图片、已通过
import()动态导入的代码做 preload——浏览器无法静态分析，preload 不会被触发 - href 资源已缓存时，preload 仍会触发一次无意义的 HTTP HEAD 请求（Chrome 表现）
- SSR 场景下，服务端输出的 preload 若与客户端 hydration 时动态插入的资源重复，可能触发双下载
最常被忽略的一点：预加载是否生效，得看 Network 面板里该请求的 Initiator 是不是 preload，而不是只看有没有发出请求。
