as属性必须正确填写且与资源用途严格匹配，否则浏览器静默忽略preload；字体预加载需加crossorigin，style/script预加载需配合真实使用节点及完全一致的路径、参数和integrity。
as 属性不填或填错，rel="preload" 就等于没写
浏览器看到 <link rel="preload"> 但没带 as，或者 as 值非法（比如 as="stylesheet"、as="javascript"），会直接静默忽略整条标签——不发请求、不报错、Network 面板里 Priority 显示 Low，和普通 fetch 一样。这不是兼容性问题，Chrome/Firefox/Safari 全部强制校验。
根本原因：没有 as，浏览器无法判断该资源后续是否会被 <script src></script>、@font-face 或 <link rel="stylesheet"> 复用，也就没法进对应缓存池（script cache / font loader / CSSOM），只能退化处理。
-
as是调度开关，不是语义装饰 - 漏写
as和写错as效果一致：白加 - 常见错误值：
as="stylesheet"（应为as="style"）、as="js"（应为as="script"）、as="font"但没配crossorigin
字体预加载必须配 crossorigin，哪怕同源
as="font" 会触发匿名 CORS 请求，无论字体是否托管在同域。漏掉 crossorigin 属性，Chrome/Safari 会下载完也静默丢弃，页面表现为 FOIT（空白字体），控制台只报 CORS error，容易被忽略。
- ✅ 正确写法：
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>（crossorigin无值即可） - ❌ 错误写法：
<link rel="preload" href="/fonts/inter.woff2" as="font">（漏crossorigin） - ❌ 错误写法：
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin="use-credentials">（CDN 几乎都不支持带凭证的字体请求） - 服务端响应头必须含
Access-Control-Allow-Origin: *或对应域名，否则预加载中断且无 fallback
as="style" 和 as="script" 不是“下载完就生效”
预加载只把资源放进对应缓存池，不会自动解析 CSSOM 或执行 JS。必须配合真实使用节点才能复用，且路径、查询参数、integrity 必须完全一致。
-
as="style"必须配onload="this.onload=null;this.rel='stylesheet'"，否则只下载不解析；type和integrity若存在，也要和后续<link rel="stylesheet">完全一致 -
as="script"后续若用<script src="main.js?v=1"></script>，预加载就得写href="main.js?v=1"；若有integrity，preload 标签也得带上相同值，否则缓存不匹配 -
as="fetch"仅适用于明确 MIME 类型的 JSON/API 资源，比如type="application/json"；后端返回text/plain却声明as="fetch"，Chrome 会拒绝使用预加载缓存
as="image" 和 as="video" 不能混用
as="image" 专为 <img src> 设计，覆盖 JPEG/PNG/WebP/AVIF/SVG；as="video" 专为 <video src></video> 设计。混用会导致策略错位，比如把首屏视频 poster 图写成 as="video"，可能触发 range 请求，拖慢渲染。
-
as="image"不支持srcset或sizes，只适合尺寸/格式确定的单图；对普通<img src>无效，不如直接设fetchpriority="high" -
as="video"的资源必须是能被<video></video>直接消费的 .mp4/.webm 等，不是封面图 - 第三方资源建议先
curl -I验证响应头和实际 MIME 类型，再决定as值
最常被忽略的一点：as 值必须与资源真实用途严格匹配，且所有配套属性（crossorigin、onload、integrity、查询参数）都要对齐——差一个字符，缓存就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
