as属性必须填对，否则浏览器直接忽略preload；漏写或写错as值，浏览器不报错、不发请求、也不降级，仅当标签不存在。
as属性必须填对，否则浏览器直接忽略preload
浏览器看到 rel="preload" 但没带 as，或 as 值错，不会报错、不发请求、也不降级提示——它就当这行标签不存在。这不是兼容性问题，是规范强制行为。
-
as="font"：只用于 WOFF/WOFF2/TTF 字体，且必须显式写crossorigin（哪怕同源），否则 Chrome/Safari 完全跳过请求 -
as="style"：对应 CSS 文件，触发Accept: text/css，后续<link rel="stylesheet">才能复用缓存；别对已有的rel="stylesheet"标签再套一层 preload -
as="script"：只下载不执行，后续<script src></script>或import()引用同一 URL（含完整查询参数）才会命中缓存；若原脚本有integrity，preload 也得带上，否则缓存不匹配 -
as="image"：仅支持单图预加载，不支持srcset或sizes；首屏背景图、<img>的src值一致才复用 -
as="video"：专为<video src></video>设计，不是给 poster 图用的；poster 图仍用as="image"
字体 preload 必须配 crossorigin，漏写等于白写
WOFF2 字体预加载时，as="font" 会触发匿名 CORS 请求。服务端若没返回 Access-Control-Allow-Origin，请求失败且无 fallback —— 页面表现为 FOIT（空白字体），控制台只报 CORS error，容易被忽略。
- 正确写法：
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>（crossorigin属性无值即可） - 错误写法：
<link rel="preload" href="/fonts/inter.woff2" as="font">（漏crossorigin，Safari 尤其严格） - 错误写法：
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin="use-credentials">（CDN 几乎都不支持带凭证的字体请求）
as值和资源实际用途不匹配，优先级和缓存全乱
as 不是“建议”，而是调度依据：决定请求头、CSP 策略、缓存分区、是否启用 HTTP/2 推送复用。填错会导致资源进错缓存池，后续真实使用时仍要重新 fetch。
- 把 JS 文件写成
as="fetch"：绕过 script 缓存，无法被<script src></script>复用，还失去Priority: Highest - 把 CSS 写成
as="stylesheet"：浏览器不认识这个值，退化为普通 fetch，Priority降为 Low - 图片用
as="image"才支持fetchpriority="high"（Chrome 101+），用as="fetch"就没这优化
验证 preload 是否真正生效，只看 Network 面板三列
写了标签不等于生效。打开 Chrome DevTools → Network，筛选目标资源名，重点盯：
-
Initiator：必须是
preload，不是parser或script；如果是后者，说明位置错了（比如塞在里） -
Priority：字体/JS 应为
Highest，CSS/图片应为High；若显示Low或Medium，大概率是as没写或写错 -
Time：对比未加 preload 时的起始时间，理想提前 200–600ms；若看到
Pending或Canceled，可能是 preconnect 没就绪，或 HTTP/2 推送已发
真正难的不是写对语法，而是判断“这个资源到底该不该 preload”——它只解决浏览器发现太晚的问题，不是所有关键资源都适合。路径、时机、类型，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
