as属性用途及预加载优化技巧

`as`属性是`link rel="preload"`真正生效的强制开关，缺失或错误（如大小写不符、类型不匹配、字体未配`crossorigin`）将导致预加载静默失效——浏览器既不报错也不警告，资源按低优先级普通请求处理，彻底丧失提前加载、解析复用、CSP校验和缓存共享等关键优化能力；它严格决定资源类型识别、请求头生成、执行队列准入及跨域策略，必须精准对应规范值（如`script`/`style`/`font`/`image`），且`font`场景下`crossorigin`属性的存在不可或缺，任何“看似合理”的变体都会让精心设计的预加载形同虚设。

as 属性不是锦上添花的可选字段，而是 link rel="preload" 能否真正起效的开关。漏写或写错，浏览器就当它不存在——不报错、不警告、也不加载，静默失效。

为什么 as 缺失会导致 preload 完全没用

浏览器靠 as 值判断资源类型，进而决定：优先级、请求头（如 Accept）、CSP 校验、是否能被后续同类型资源复用。没有它，rel="preload" 降级为普通 fetch 请求，优先级极低，且无法进入 JS/CSS 执行队列。

• as="script" → 进入 JS 解析准备队列，支持 onload、import() 复用
• as="fetch" 或缺失 → 只进 HTTP 缓存，不触发解析，后续