as属性是浏览器加载策略的硬性开关，非可选提示；漏写或写错导致预加载失效，priority降为low且资源重复加载。
漏写 as，或写错值，rel="preload" 就等于没写——浏览器不报错、不警告，但 Network 面板里 Priority 显示为 Low，Initiator 是 (Other)，资源照样重复加载。
as 属性不是可选提示，而是浏览器加载策略开关
as 告诉浏览器“这是什么”，浏览器据此决定：发什么 Accept 头、走哪个缓存分区、是否强制 CORS、用什么优先级调度、后续能否被 @font-face 或 <script></script> 复用。它不是语义标签，是硬性策略指令。
-
as="font"→ 触发 FontLoader，校验Content-Type: font/woff2，启用高优先级和独立缓存池 -
as="style"→ 进入 CSS 缓存区，允许被后续<link rel="stylesheet">复用 -
as="script"→ 进入 script 缓存区，支持integrity校验复用；as="module"无效，模块脚本也用as="script" -
as="image"→ 仅当<img src>的 URL 字符串完全一致时才复用；as="img"或as="picture"全部被忽略 -
as="fetch"→ 仅适用于fetch()调用的 API 接口，且响应头必须含Access-Control-Allow-Origin
字体预加载必须配 crossorigin，哪怕同源
字体加载强制要求 CORS 上下文，浏览器不会自动降级。漏掉 crossorigin，即使 HTML 和字体在同一域名下，已下载的数据也会被丢弃，@font-face 会重新发起一次带 CORS 头的请求——你在 Network 面板看到两个请求，控制台却无任何报错，只表现为 FOIT（文字空白）。
- ✅ 正确写法：
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>（crossorigin无等号、无值） - ❌ 无效写法：
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2">（漏crossorigin） - ⚠️ 风险写法：
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin="anonymous">（非必要，部分 CDN 会因头校验严格而拒绝）
路径必须字符串完全一致，连查询参数都不能差
浏览器判断预加载能否被复用，靠的是 URL 字符串完全相等，不是语义匹配。构建工具注入哈希、版本号、甚至末尾斜杠差异，都会导致复用失败。
- 如果
@font-face中是url('/fonts/inter.woff2?v=2.1')，但<link>的href是/fonts/inter.woff2，就不会复用 -
/assets/main.js和/assets/main.js?（带空查询参数）被视为两个不同资源 - 大小写敏感：
/Fonts/Inter.woff2≠/fonts/inter.woff2 - 相对路径不可靠：HTML 在
/page/下写./fonts/inter.woff2，解析结果可能出错；必须用绝对路径或根相对路径（如/fonts/inter.woff2）
preload 只下载，不执行；CSS 和字体要额外处理才能生效
rel="preload" 不触发解析、不应用样式、不绑定字体。它只是把文件提前放进缓存。后续资源如何使用这些缓存数据，得靠显式配合。
- CSS 必须加
onload="this.onload=null;this.rel='stylesheet'"，否则只下载不渲染 - 字体无需 onload，但必须确保
@font-face的src与href完全一致，且服务端返回的Content-Type匹配type属性（如font/woff2） - 图片预加载后，
<img>仍需设fetchpriority="high"和loading="eager"，否则浏览器可能按默认策略延迟解码或布局 - JS 模块建议改用
rel="modulepreload"（禁止加as），它会静态解析import并递归预取依赖；rel="preload" as="script"只下载入口文件，不处理依赖
最容易被忽略的点是：所有这些规则都只在 HTML parser 初期生效——<link rel="preload"> 必须写在 <meta charset> 后、<title></title> 前；动态插入、放 里、或 JS 创建后 append，全部静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
