rel="preload" 失效主因是 as 属性漏写、错写或未匹配资源类型：as="font" 触发CORS检查，as="style" 需配合 onload 切换 rel 才生效，as="script" 影响缓存复用，且所有场景均需路径、type、CORS头严格一致。
写了 rel="preload" 不代表资源就真被高优加载了——90% 的失效案例，都卡在 as 属性漏写、写错或没配对上。
为什么 as 属性不能省，且必须严格匹配资源用途
浏览器靠 as 决定请求优先级、CORS 策略、缓存复用逻辑。漏掉它，rel="preload" 就退化成普通 fetch 请求，Priority 降为 Low，和没写几乎一样。
-
as="style"→ CSS 下载后可被后续<link rel="stylesheet">复用；不写，就算 href 相同，也会重复下载 -
as="font"→ 强制触发 CORS 检查，必须同步加crossorigin，否则字体加载完也不会应用（哪怕同域） -
as="script"→ 进入 script 缓存池，等真正<script src>出现时才执行；写成as="fetch"或空着，JS 可能被加载两次 -
as="image"→ 仅对<img>的srcset/sizes匹配有效；对普通<img src>无效，别乱用
预加载 CSS 时必须配合 onload 切换 rel
只写 <link rel="preload" href="main.css" as="style">，CSS 不会自动生效——它只是下载进缓存，但不会解析、不会影响渲染。
- 错误做法：再额外写一个
<link rel="stylesheet" href="main.css">→ 浏览器可能发起第二次请求（尤其当路径写法不一致时） - 正确做法：用
onload动态切换：<link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'"> - 注意：要加
this.onload=null防止多次触发，完整写法是：onload="this.onload=null;this.rel='stylesheet'"
字体预加载失败的三个高频原因
Web 字体是 rel="preload" 最常翻车的场景，FOIT/FOUT 依旧明显，基本逃不开以下问题：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 没加
crossorigin属性：即使字体和 HTML 同源，也必须加，否则浏览器丢弃已加载字体 -
as值写成as="font/woff2"或as="woff2"：只能是as="font"，类型由type属性声明 -
type值不匹配实际 MIME：服务端返回font/woff2，但标签里写type="font/woff"→ 浏览器可能拒绝复用缓存
怎么验证 preload 是否真起作用
别只看 HTML 里有没有那行代码，打开 Chrome DevTools → Network 面板，筛选条件要具体：
- 按
Initiator列筛选preload，不是parser或script - 检查
Priority列：应为Highest（as="font"）或High（as="style"），不是Low - 对比未加 preload 时的 Time：理想可提前 200–600ms 开始下载，弱网下收益更明显
- 看到
blocked:other→ 检查是否启用了 HTTP/2 Server Push（它会覆盖 preload）或路径 404
最常被忽略的一点：rel="preload" 只解决“发现晚”，不解决“体积大”或“服务器慢”。如果 main.css 有 800KB，预加载再早也没用——先压缩、拆分、内联关键部分，再考虑 preload 剩余部分。
