rel="preload" 必须配对 as 属性，否则浏览器无法识别资源类型，将降级为低优先级 fetch；常见失效原因包括漏写 as、路径错误、字体未加 crossorigin、HTTP/2 Server Push 干预或资源已被自然声明。
rel="preload" 不是“写了就快”，而是必须配对 as 属性、路径准确、时机得当，否则浏览器直接忽略或降级为普通 fetch。
为什么写了 rel="preload" 却没效果？
最常见原因是漏了 as 属性。没有它，浏览器无法判断资源用途，既不会提升优先级，也不会进对应缓存池（比如 script 缓存或 font 缓存），实际和 fetch() 一样低优。
-
href路径错误：相对路径在子页面中失效（如/assets/main.css写成assets/main.css） - 字体预加载没加
crossorigin：浏览器加载完会丢弃，等真正用到时重拉一次 - HTTP/2 Server Push 已启用：
preload请求会被静默跳过（Push 优先级更高） - 资源已被其他标签自然声明（如
<link rel="stylesheet">已存在）：浏览器认为没必要重复抓
哪些资源值得 rel="preload"？
只盯住「首屏渲染链上缺失的高优先级依赖」。不是所有 JS/CSS 都该预加载，更不能 preload 埋点脚本或非首屏图片。
- 首屏必需、但 HTML 里还没出现的 CSS（比如内联了部分样式，外部
main.css在<body>底部才引入） - 被关键 CSS 引用、但解析 CSS 后才发现的字体（
woff2文件） - 通过
import()动态加载、却是首屏组件入口的 JS（需配合onload手动挂载） - 首屏 hero 图（
as="image"无效，改用img src+fetchpriority="high"更直接）
as 值怎么选？错一个就白写
as 不是可选项，是强制要求。它决定请求头、缓存策略、CSP 校验和解析行为。写错等于没写。
-
as="style"：用于 CSS，加载后需手动转成样式表（onload="this.rel='stylesheet'"） -
as="font"：必须带crossorigin，且type建议明确（如type="font/woff2"） -
as="script"：仅适用于无async/defer的关键脚本；若已有defer，preload 可能引发重复下载 -
as="image"对<img>标签无意义——浏览器已按fetchpriority调度，直接在img上设fetchpriority="high"更可靠
怎么验证它真起作用了？
别信控制台没报错就等于生效。打开 Chrome DevTools → Network 面板 → 刷新 → 筛选 Initiator 是 preload 的请求：
- 看到状态码 200 且 Priority 显示
Highest或High→ 成功 - Initiator 是
other或状态为blocked:other→ 路径错或被 Push 拦截 - 没找到任何
preload请求 → 标签没被解析（可能在<body>里，或被注释/条件编译干掉）
动态插入的 link（比如用 JS 创建）必须在 <head> 中 append，放在 <body> 后可能被浏览器忽略。
