as属性是rel="preload"的强制指令，决定加载流程、CORS校验、缓存池和优先级；漏写或错写则请求静默失效；字体必须as="font"+crossorigin（空值），且路径、Content-Type须完全一致。
as属性决定浏览器用哪套加载流程处理预加载资源
它不是提示，是强制指令。浏览器看到 rel="preload" 后，完全依赖 as 值来决定：走 FontLoader 还是普通 fetch、是否校验 CORS、Accept 头发什么、缓存进哪个池子、优先级设多高。写错或漏掉，rel="preload" 就等于没写——Network 面板里连请求都看不到，控制台也静默无日志。
字体必须用as="font"且显式声明crossorigin
只有 as="font" 才会触发字体专用加载器，启用高优先级、CORS 检查、Accept: font/woff2,*/* 和独立缓存池。其他值比如 as="fetch" 或 as="script" 会让字体进普通 HTTP 缓存，后续 @font-face 根本认不出它，结果就是重复下载 + FOIT。
-
crossorigin必须写，且是空值（crossorigin），不是crossorigin="anonymous"，更不能漏 - 哪怕字体和 HTML 同源，也必须加
crossorigin；浏览器不降级，已下载数据直接丢弃 - 服务端返回的
Content-Type（如font/woff2）必须和type属性一致，否则缓存不复用
路径字符串必须完全一致，连查询参数都不能差
浏览器判断预加载能否被 @font-face 或 <link rel="stylesheet"> 复用，只做 URL 字符串全等匹配，不做归一化或重定向解析。
-
@font-face中写url('/fonts/inter.woff2?v=2.1')，但<link>的href是/fonts/inter.woff2→ 不复用 - 大小写、末尾斜杠、协议（
http://vshttps://）、域名（www.example.comvsexample.com）任意一处不同，都算两个资源 - 构建工具自动注入哈希或版本号时，极易因未同步导致失效
常见类型对应的as值不能靠猜
as 值有严格语义，不是别名集合。浏览器不接受模糊匹配：
立即学习“前端免费学习笔记（深入）”；
- CSS 文件只能用
as="style"，写as="stylesheet"或as="css"→ 无效 - JS 脚本用
as="script"，as="javascript"或as="js"→ 不触发 preload - 图片用
as="image"，但仅对<img>的src有效；<video poster>里的图不在此列 -
as="fetch"专用于关键 JSON，跨域时需配crossorigin="anonymous"，且不能用于字体或样式
最容易被忽略的其实是三件事：as 值写错或漏写、crossorigin 没显式声明、构建后路径不一致——它们都不会报错，只会让预加载在后台彻底失效。
