as属性写错会触发重复请求，因浏览器按as值分缓存池，错写导致preload与真实引用无法复用；字体须as="font"+crossorigin，css须as="style"+onload切换rel，路径含查询参数必须完全一致。
as属性写错真会触发重复请求
会，而且非常常见。浏览器把 rel="preload" 当作一个独立资源声明，as 值决定它进哪个缓存池、走哪套加载逻辑。如果 as 写错（比如字体写成 as="fetch"），后续真实引用（如 @font-face 或 <link rel="stylesheet">）会被当成另一个资源重新拉取——URL一样也白搭。
典型现象：Network 面板里同一 URL 出现两次请求，Initiator 一个是 parser（preload），另一个是 css 或 font（真实使用），Priority 一个 Highest/High，一个 Low。
- 字体用
as="fetch"→@font-face仍发起带 CORS 头的二次请求 - CSS 用
as="script"→<link rel="stylesheet">不复用 preload 缓存，重下 - JS 用
as="fetch"但后续<script src></script>带integrity→ 缓存 key 不匹配，再拉一次
怎么验证as是否写对
别信 HTML 里有没有那行代码，直接看 Chrome DevTools Network 面板：
- 筛选
Initiator列为parser的请求（排除 JS 动态插入的假象） - 检查
Priority列：as="font"应为Highest，as="style"或as="script"应为High；若显示Low，基本就是as漏了或写错 - 点开请求详情，核对
Response Headers中Content-Type是否和type属性一致（如font/woff2） - 对比未加 preload 时的 Time 列：理想情况应提前 200–600ms 开始下载
字体和CSS的as写法最容易翻车
字体和样式是重复请求高发区，错一个字符就白干：
- 字体必须写
as="font"+crossorigin（空值，不是crossorigin="anonymous"），且@font-face中src的 URL 必须和href完全一致（含查询参数、大小写、末尾斜杠） - CSS 必须写
as="style"，并配onload="this.onload=null;this.rel='stylesheet'"，否则只下载不生效；切忌再额外写一个<link rel="stylesheet"> - 千万别给
modulepreload加as属性——它明确禁止as，加了就静默失效
动态插入preload永远无效
React 的 useEffect、Vue 的 mounted、甚至 document.head.appendChild() 插入的 <link rel="preload"> 全部无效。浏览器只在 HTML 解析初期（parser 阶段）扫描 ，DOM 构建完成后插入等于没写。
如果你需要运行时控制预加载，改用 fetch() + cache.put()，或 Image 对象预加载图片——rel="preload" 只认静态模板里的硬编码。
最常被忽略的是路径一致性：构建工具自动加的版本哈希（如 ?v=1.2.3）必须同步出现在 href 和真实引用中，差一个字符，缓存就不复用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
