as属性漏写或类型错配会导致preload失效，浏览器静默忽略；字体预加载必须加crossorigin属性；css预加载需用onload切换rel值；验证需检查network面板的initiator和priority字段。
as属性漏写或类型错配，preload就等于没写
浏览器解析 rel="preload" 时，必须看到合法的 as 值才能触发高优先级预加载。漏掉 as，或写成 as="javascript"、as="stylesheet"、as="img" 这类非标准值，整条 <link> 会被静默忽略——不报错、不警告、Network 面板里也看不到请求。
根本原因在于：没有 as，浏览器无法决定该资源是否要走 CORS、用什么优先级、进哪个缓存池、能否被后续 <script src></script> 或 @font-face 复用。它只能等 HTML 解析完再按常规逻辑处理，完全失去“预”字意义。
-
as="style"→ 对应 CSS 文件；写成as="stylesheet"就失效 -
as="font"→ 对应 WOFF2/WOFF/TTF 字体；as="font/woff2"或as="woff2"全部无效 -
as="script"→ 适用于所有 JS（含模块脚本）；as="module"或as="javascript"不被识别 -
as="image"→ 覆盖 JPEG/PNG/WebP/AVIF/SVG；as="picture"或as="img"无效 -
as="fetch"→ 仅用于关键 JSON 接口，且响应头必须含Access-Control-Allow-Origin
字体预加载必须带 crossorigin，哪怕同源
只要 as="font"，浏览器就会以 CORS 模式发起请求。即使字体和页面同域，缺了 crossorigin 属性，Chrome 和 Safari 会加载成功但直接丢弃——控制台不报错，字体也不生效，FOIT 依旧明显。
正确写法是显式声明 crossorigin（无值），不是 crossorigin="" 或 crossorigin="anonymous"。服务端响应头里也必须返回 Access-Control-Allow-Origin: * 或对应域名，否则预加载中断且无 fallback。
- ✅ 正确：
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin> - ❌ 错误：
<link rel="preload" href="/fonts/inter.woff2" as="font">（漏crossorigin） - ❌ 错误：
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin="use-credentials">（多数 CDN 不支持带凭证的字体请求）
CSS 预加载后不自动应用，得靠 onload 切换 rel
<link rel="preload" href="main.css" as="style"> 只负责下载，不会解析、不会构建 CSSOM、更不会影响渲染。如果后面还有一条 <link rel="stylesheet" href="main.css">，路径稍有差异（比如多一个斜杠、大小写不同、带无关查询参数），浏览器会发起第二次请求。
稳定做法是用 onload 在下载完成时切换 rel 值，并清除事件防止重复触发：
<link rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
注意：onload 在 Safari 中支持良好，但旧版 iOS Safari（≤15.6）存在兼容性问题，如需覆盖可加简单降级逻辑。
验证是否真起作用，只看 Network 面板的两个字段
别只检查 HTML 里有没有那行代码。打开 Chrome DevTools → Network 面板，做两件事：
- 在 Initiator 列筛选
preload（不是parser或script） - 检查 Priority 列：应为
Highest（as="font"）、High（as="style"或as="script"），绝不能是Low
如果 Priority 是 Low，基本可以断定 as 漏了、写错了，或者路径与后续实际引用不一致。弱网下提前 200–600ms 开始下载才算有效；看到 net::ERR_CONNECTION_REFUSED，说明 href 路径错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
