preload用于当前页面马上要用的关键资源，以high/highest优先级抢占带宽；prefetch用于后续页面可能用到的资源，onload后以low优先级在空闲时加载。
preload的High优先级会抢带宽，但只在它该抢的时候才合理
preload 的请求在 HTML 解析阶段就触发，浏览器直接给它 High 或 Highest 优先级，意味着它可能打断正在加载的 CSS、JS 甚至首屏图片。这不是 bug，是设计使然——但它只该用于「当前页面马上就要用、且默认加载太晚」的资源。
常见错误包括：
- 对已用
defer或type="module"的入口脚本再加<link rel="preload" as="script">：脚本本身已有调度逻辑，preload 反而制造冗余请求，挤占 HTTP/2 流 - 对跨域字体漏写
crossorigin：请求发出去了，但响应被丢弃（无报错），FOIT 持续，而带宽已被占用 - 用
as="image"preload<img srcset>中的某张图：srcset是运行时解析的，preload 无法匹配，结果白占一次 high 优先级请求
验证方式很简单：Chrome DevTools → Network → 刷新 → 筛选你的 preload 资源 → 看 Priority 列是不是 High；如果不是，基本就是 as 写错或路径 404。
prefetch的Low优先级不是“不加载”，而是“等别人吃完再动筷子”
prefetch 请求在 window.onload 后才发起，浏览器明确把它标为 Low，且实际是否执行还取决于空闲条件：CPU 负载低、网络未拥塞、没开省流模式、内存够用。它不参与当前渲染流水线，但一旦触发，仍会走完整 HTTP 请求流程。
容易踩的坑有：
- 把首页 banner 图设成
rel="prefetch"：浏览器真就等到所有 JS/CSS 加完、用户都开始滚动了才去拉图，首屏 LCP 直接拖慢 300ms+ - prefetch 的资源没配
Cache-Control：下次跳转时仍要重下，预取失效，还浪费了上次的带宽 - 误以为 prefetch 能复用 preload 缓存：不能。preload 缓存进的是「当前页面专用缓存分区」，prefetch 进的是常规 HTTP 缓存，两者隔离
注意：as 属性对 prefetch 不是必须的，但建议加上（比如 as="script"），否则浏览器只能靠 MIME 类型推断，可能降级处理。
preload 和 prefetch 同时存在时，浏览器怎么仲裁带宽
它们不在同一调度队列里竞争。preload 进的是「高优渲染队列」，prefetch 进的是「后台空闲队列」，所以不会直接互抢。真正的问题出在「preload 用错了对象」——比如把本该 prefetch 的商品页 JS 写成 preload，它就会和首页 CSS 争 Highest 优先级，导致关键样式延迟解析，LCP 延后。
几个硬性事实：
- preload 的
as值决定 CORS 行为：as="font"强制要求crossorigin，哪怕同源也得加 - prefetch 的资源若被后续页面用到，会直接从 HTTP 缓存读取，不发新请求；但前提是 URL 完全一致（含 query 参数）
- HTTP/2 下，preload 占用独立 stream，过多 preload 会导致 stream 数量接近上限，影响其他资源并发
别信“多加几个 prefetch 总没坏处”——浏览器空闲时未必真执行，但 DNS 查询、TCP 握手、TLS 协商这些前置动作照做不误，尤其在弱网下反而增加首屏延迟。
怎么判断一个资源该用 preload 还是 prefetch
只看一条：这个资源在当前导航周期内，是否「一定会被用、且浏览器按默认顺序发现得太晚」？是 → preload；否 → prefetch 或不用。
典型场景对照：
-
@font-face中的.woff2：浏览器解析完 CSS 才知道要拉字体 → 必须preload as="font" - SPA 中「用户点击购物车图标后才加载的 checkout.js」：当前页不用，但路径确定 →
prefetch as="script" - 首页轮播图第二张图：用户可能永远不滑到那里 → 不 preload、不 prefetch，用
loading="lazy"更合适 - 第三方统计脚本
analytics.js：非首屏必需，也不影响后续页面 → 既不该 preload，也不该 prefetch
最隐蔽的陷阱是「以为自己知道用户下一步点哪」——比如电商首页 prefetch 所有高销量商品页，结果 80% 的 prefetch 请求根本没被复用，带宽和缓存都被污染了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
