preload 在html解析时立即发起请求，prefetch需等onload后空闲时才触发；preload必须指定as属性以确保正确加载，prefetch的as可选但推荐；同url的preload与prefetch互不复用，且prefetch被cancel属正常行为。
preload 一解析 HTML 就发请求，prefetch 要等 onload 后才动
两者根本不是“谁更快”，而是“在哪个时间点被调度”。preload 是 parser-driven：浏览器一边解析 HTML，一边看到 <link rel="preload"> 就立刻发起请求，不等 DOM 构建完成，也不管 JS 是否执行完；而 prefetch 是 idle-driven：必须等 window.onload 触发、主线程空闲、网络无压力时，浏览器才可能启动它——用户还没划到首屏，prefetch 就不会动。
as 属性对 preload 是强制的，对 prefetch 是可选的
preload 漏掉 as，基本等于白写。浏览器靠它决定优先级、CORS 行为、缓存分区和 MIME 处理逻辑：
-
as="font"必须配crossorigin，否则 Chrome/Safari 加载完也丢弃（连错误都不报） -
as="style"需手动补onload="this.onload=null;this.rel='stylesheet'"，否则只下载不应用 -
as="image"不支持srcset或sizes，只适合明确尺寸/格式的单图 -
prefetch不强制as，但加上能提升类型推断准确率，比如as="script"可避免被当普通 fetch 降级
同一个 URL 写两次，preload 和 prefetch 会各下一遍
Chrome 对这两类请求走完全隔离的加载通道：preload 进“当前导航高优资源池”，生命周期绑定本次页面；prefetch 进“长期 HTTP 缓存”，按 Cache-Control 存。即使 URL 完全相同：
- 不会复用已加载的
preload结果去满足prefetch - 也不会用
prefetch缓存来加速preload的后续使用 - 若目标资源没设强缓存（如缺
Cache-Control: public, max-age=31536000），prefetch下完下次访问仍得重下
验证是否生效，不能只看 HTML 有没有那行
打开 Chrome DevTools → Network 面板后要盯三个关键点：
- 筛选
Initiator列为preload（不是parser或script） - 检查
Priority列：应为Highest或High；显示Medium或Low就说明as漏了、写错、或漏crossorigin - 点开请求详情，确认响应头里有正确
Content-Type，且字体类资源返回状态码是 200（非 404 或 MIME 不匹配）
真正容易被忽略的是：prefetch 请求在 Network 里显示 cancelled 并不等于失效——它只是被浏览器主动终止，因为用户跳走了，或者页面还没触发 onload。这恰恰说明它按设计在工作，而不是代码写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
