preload必须写在<head>最前面且静态声明，动态插入无效；as属性必须精准匹配资源类型并配齐crossorigin等要求，否则降级为Low优先级；仅对浏览器发现太晚但首屏急需的资源（如@font-face字体、内联style背景图）有效，错用会抢带宽拖慢首屏。
preload必须写在最前面，动态插入完全无效
浏览器只在 HTML 解析初期（parser 阶段）识别 rel="preload"，一旦开始构建 DOM 或进入 <body>，后续的 <link rel="preload"> 就被忽略。JS 动态创建并 append 的标签，比如 document.createElement('link')，根本不会触发预加载——不报错、不警告，只是静默失效。
常见错误包括：
- 把
<link rel="preload">放在<link rel="stylesheet">后面、<title>下方，甚至塞进<body> - 在 React/Vue 的
useEffect或mounted钩子中插入 - 用
innerHTML往<head>追加（旧版 Safari 可能解析，但行为不可靠）
✅ 正确做法：服务端渲染时生成，或在 HTML 模板顶部硬编码，位置紧接 <meta charset> 之后、<title> 之前。
as属性必须准确匹配资源类型，漏写或写错等于没写
as 不是提示，是强制声明。浏览器靠它决定请求头、CSP 策略、缓存分区和优先级。填错或不填，Network 面板里 Initiator 显示为 (Other)，Priority 降为 Low，实际效果和没写一样。
立即学习“前端免费学习笔记（深入）”；
典型配对必须严格满足：
- CSS 文件 →
as="style"（不是"stylesheet"） - 字体（.woff2/.woff）→
as="font"+crossorigin（同源也必须加） - JS 脚本 →
as="script"（模块脚本也用这个，不用配type="module"） - 图片 →
as="image"（as="img"或as="picture"全部无效） - JSON 接口 →
as="fetch"，且响应头需含Access-Control-Allow-Origin
漏掉 crossorigin 的字体 preload，Chrome 和 Safari 会直接跳过——FOIT 问题照旧，且控制台无报错。
preload只下载不执行，CSS 和字体要额外处理
<link rel="preload" href="main.css" as="style"> 只负责下载，不会解析、不会应用。如果再写一个 <link rel="stylesheet" href="main.css">，路径稍有差异（比如斜杠、大小写、查询参数），就会触发二次请求。
正确做法：
- CSS：
<link rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> - 字体：必须带
crossorigin，且需配合@font-face中的srcURL 完全一致（含扩展名、查询参数） - JS：
preload后仍需<script src="app.js"></script>；若有integrity，preload也得带上，否则缓存不匹配 - 图片：
as="image"不支持srcset或sizes，只适合确定尺寸/格式的单图；对普通<img src>无效，不如直接设fetchpriority="high"
哪些资源真该用 preload，哪些千万别碰
rel="preload" 只对“浏览器本来看不见、但首屏立刻要用”的资源有效。浏览器只能自动发现 <img>、<script src>、<link rel="stylesheet"> 里的资源，以下几类常被“藏”着，导致 FOIT、FOUC 或首屏图延迟：
- ✅ 该用：
@font-face引用的字体（尤其 .woff2）、内联<style>里的background-image、紧跟<script type="module">后的主 chunk、首屏<picture>中关键<source> - ❌ 别碰：
analytics.js、非首屏轮播图、第三方 widget 脚本、懒加载模块、<img src>（直接设fetchpriority="high"更简单）
滥用会抢带宽、拖慢首屏，甚至白屏。验证是否生效不能只看 HTML 有没有那行——打开 Chrome DevTools → Network 面板，筛选 Initiator = preload，检查 Priority 是否为 Highest 或 High，Time 是否比未加前提前 200–600ms。
