适合preload的资源是浏览器解析时不可见但首屏立即需要的关键资源，如@font-face字体、内联style中的background-image、type="module"后紧跟的主chunk、picture中首屏source图片；而img src、非首屏轮播图、统计脚本等不应使用。
哪些资源适合用 preload 预加载
不是所有资源都该加 preload，它只对“浏览器解析时看不见、但首屏立刻要用”的资源有效。比如：@font-face 引用的字体、内联 <style></style> 里的 background-image、<script type="module"></script> 后紧跟的主 chunk、<picture></picture> 中首屏 <source></source> 的图片路径。
以下情况千万别用：<img src>（直接设 fetchpriority="high" 更简单）、非首屏轮播图、统计脚本、懒加载模块——它们不参与首屏渲染，加了反而抢带宽。
preload 必须写在
浏览器一解析到 <link rel="preload"> 就发起请求，不等 DOM 构建完成。放错位置等于没写。
- ✅ 正确：紧接
<meta charset>后、<title></title>前 - ❌ 错误：放在
里、用 JS 动态插入、或排在一堆<link rel="stylesheet">后面 - ⚠️ 风险：放得太晚，字体或首屏图可能已错过最佳加载窗口，延迟常超 200ms
as 属性漏写或写错，preload 就白写了
as 不是可选装饰，它决定请求头、CORS 策略、缓存分区和优先级。Chrome DevTools Network 面板里如果看到 Priority 是 Low，基本就是 as 漏了或类型不匹配。
-
as="font"→ 必须同步加crossorigin（哪怕同源），否则字体加载完也不会应用 -
as="style"→ 若后续仍用<link rel="stylesheet">引同一 URL，能复用；但若没配onload，只下载不生效 -
as="script"→ 若后续<script src></script>有integrity，preload也得带上，否则缓存不匹配 -
as="image"→ 不支持srcset或sizes，只适合确定尺寸/格式的单图；对普通<img src>无效
验证 preload 是否真起作用
不能只看 HTML 有没有那行，得进 Chrome DevTools → Network 面板确认：
- 按
Initiator列筛选preload（不是parser或script） - 检查
Priority列：应为Highest，不是Low - 对比资源请求时间线：预加载资源应比对应
<link rel="stylesheet">或<script></script>提前至少 100ms 发起
最容易被忽略的是：字体 preload 没加 crossorigin，或者 CSS preload 后没配 onload 转换逻辑——这两处失效，页面照样 FOIT 或白屏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
