as属性是link rel="preload"的强制开关，缺失或错误将导致静默失效；它决定资源优先级、请求头、csp校验及缓存复用，必须严格匹配类型（如script/style/font），且font需配crossorigin。
as 属性不是锦上添花的可选字段，而是 link rel="preload" 能否真正起效的开关。漏写或写错，浏览器就当它不存在——不报错、不警告、也不加载，静默失效。
为什么 as 缺失会导致 preload 完全没用
浏览器靠 as 值判断资源类型，进而决定：优先级、请求头（如 Accept）、CSP 校验、是否能被后续同类型资源复用。没有它，rel="preload" 降级为普通 fetch 请求，优先级极低，且无法进入 JS/CSS 执行队列。
-
as="script"→ 进入 JS 解析准备队列，支持onload、import()复用 -
as="fetch"或缺失 → 只进 HTTP 缓存，不触发解析，后续<script src></script>仍会重新 fetch -
as="style"→ 提前介入 CSSOM 构建；写成as="fetch"就失去 FOIT/FOUT 优化能力
as="font" 必须配 crossorigin，否则字体加载失败
字体是唯一强制要求 crossorigin 的 as 场景。WOFF2/OTF 等字体文件跨域加载时，as="font" 本身会触发 CORS 请求；若没显式声明 crossorigin，浏览器默认以匿名模式发起，而多数 CDN 不返回 Access-Control-Allow-Origin，直接中断预加载。
- ✅ 正确：
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin> - ❌ 错误：
<link rel="preload" href="/fonts/inter.woff2" as="font">（静默失败） - ❌ 错误：
crossorigin=""或crossorigin="anonymous"（多余，只需存在属性即可）
常见 as 值与实际资源类型必须严格匹配
匹配错误不会报错，但复用失效或行为异常。例如预加载 JS 却写 as="document"，浏览器下载完也不会执行；图片用 as="media" 则无法被 <img> 复用。
- JS 文件 →
as="script"（不能是"js"、"fetch"） - CSS 文件 →
as="style"（不是"css"） - SVG/WebP/AVIF →
as="image"（统一走 image，不分格式） - 视频文件（.mp4/.webm）→
as="video"（仅限<video></video>消费场景） - HTML 文档（如 iframe src）→
as="document"（不是"html"）
type 和 crossorigin 是辅助项，但关键时候能救命
type 非必需，但加上能跳过 MIME 类型探测，尤其对字体或非标准后缀资源有提速效果；crossorigin 只在 as="font" 时强制，其他类型如 as="script" 或 as="style" 跨域时按需添加（比如你明确知道资源带 CORS 头）。
-
type="font/woff2"帮助浏览器跳过 sniffing，避免误判 -
crossorigin存在即生效，不要写值；crossorigin="anonymous"是冗余写法 - CDN 字体服务（如 Google Fonts、Cloudflare Pages）通常要求
crossorigin，本地静态资源若同源则无需
最容易被忽略的是：所有 as 值都区分大小写，且只接受规范列表中的字符串。写成 as="Script" 或 as="FONT" 就等同于没写——浏览器不认识，直接忽略。别依赖“看起来像”，得照着标准来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
