rel="preload"必须置于后、前，as属性须严格匹配资源类型（如css用as="style"、字体用as="font"+crossorigin），且href路径须与后续引用完全一致，否则降级为普通请求。
rel="preload" 是当前页关键资源提速的唯一可靠手段，但加错位置、写错 as、路径不一致，它就等于没写。
rel="preload" 必须写在 后、 前
浏览器只在 HTML parser 阶段识别 rel="preload"，一旦开始构建 DOM 或进入 ，后续的 <link rel="preload"> 就被忽略。JS 动态创建并 append 的标签（比如 document.createElement('link')）根本不会触发预加载。
- ✅ 正确位置：
<meta charset="utf-8">后、<title></title>前 - ❌ 错误位置：放在
<link rel="stylesheet">下方、里、或任何<script></script>块之后 - ⚠️ 即使
href和as都对，放错位置也会让预加载“赶不上趟”——弱网下可能延迟 200–400ms，直接拖慢 LCP
as 属性必须严格匹配资源类型，且配齐 crossorigin
as 不是可选提示，它强制决定请求头、CORS 策略、缓存分区和 Network 中的 Priority。漏写或填错，rel="preload" 就降级为普通 fetch，Priority 显示 Low，Initiator 可能是 (Other)。
- 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 - 错误示例：
<link rel="preload" href="/main.js" as="javascript">—— 浏览器直接忽略
preload 只下载，不执行；CSS 和字体要额外处理
<link rel="preload" href="main.css" as="style"> 只负责下载，不会解析、不会应用。如果再写一个 <link rel="stylesheet" href="main.css">，路径稍有差异（比如斜杠、大小写、查询参数），就会触发二次请求。
- CSS 正确做法：两处
href字符串必须完全一致，且<link rel="stylesheet">仍需保留 - 字体正确做法：
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>，配合 CSS 中@font-face使用，并建议加font-display: swap - 不要对
<img src>或srcset图片用preload——不如直接设fetchpriority="high"
验证 preload 是否真起作用，别只看 HTML 有没有那行
打开 Chrome DevTools → Network 面板，筛选条件要具体：
- 按
Initiator列筛选preload（不是parser或script） - 检查
Priority应为Highest或High，若出现Low说明as写错或位置不对 - 确认响应状态码是
200（不是304或404），且Size列显示已下载字节数 - 特别注意：路径大小写、尾部斜杠、查询参数（如
?v=1.2）必须完全一致，否则缓存不命中、重复拉取
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
