preload是高优先级预加载当前页面必用资源，一解析html即发起请求且priority须为high；prefetch是低优先级预取未来页面可能用的资源，仅在onload后空闲时加载，priority为low。
preload 一解析 HTML 就发请求，prefetch 要等页面 onload 后空闲才动；不是写了就加载，时机和条件缺一不可。
preload 为什么写了却没在 Network 里看到 high 优先级请求？
常见现象是写了 <link rel="preload">，但 DevTools Network 面板里找不到对应条目，或 Priority 显示为 low —— 这说明它根本没被当作 preload 处理。
- 最常见原因是漏写或写错
as属性：as="font"写成as="fonts"或直接省略，浏览器就当普通 fetch，降级为低优先级 - 字体资源必须同时带
crossorigin（哪怕同源），否则 Chrome/Safari 加载完也会丢弃，且不报错，只 FOIT - 路径 404 或返回非预期 MIME 类型（比如
as="script"但服务端返回text/plain）会导致 preload 被静默忽略 - 资源虽加载了但后续没被实际使用（如 preload 了
main.js，但页面最终用的是main.abc123.js），Chrome 控制台会警告 “resource was preloaded but not used”
prefetch 请求一直不发起，是代码没生效吗？
不是代码无效，而是触发条件还没满足 —— prefetch 不是“立即执行”，它依赖浏览器判断当前是否空闲。
- 页面还没触发
onload（比如有长任务阻塞主线程、或某个<img>一直 loading 中），prefetch 就不会启动 - 用户快速跳转离开当前页，浏览器会主动取消 prefetch 请求（Network 里显示 cancelled）
- Firefox 默认禁用 prefetch（
network.prefetch-next = false），Safari 对非脚本类资源（如 .css、.jpg）支持极弱 - href 必须是绝对路径或根相对路径（如
/js/next.js），不能是协议相对路径（//cdn.com/a.js），否则解析失败
同一个资源既 preload 又 prefetch，会发生什么？
Chrome 会发两次请求，且无法复用缓存 —— 因为 preload 和 prefetch 走的是不同缓存分区和优先级通道。
- preload 进的是“当前页高优资源池”，生命周期绑定当前导航；prefetch 进的是“长期 HTTP 缓存”，按 Cache-Control 存
- 即使 URL 完全相同，preload 下载的资源也不会被 prefetch 复用，反之亦然
- 若目标资源没设强缓存（如缺少
Cache-Control: public, max-age=31536000），prefetch 下载后下次访问仍要重下，白忙一场 - 对字体、首屏图这类资源误用 prefetch，等于放弃控制权：浏览器可能完全跳过，导致 FOIT/FOUT 加剧
如何确认 preload/prefetch 真正在起作用？
别只看 HTML 有没有那行标签。验证必须落到 DevTools 的 Network 面板行为上。
- preload：筛选资源名后，检查
Priority列是否为high，Initiator是否为preload，且时间线早于 CSS/JS 解析 - prefetch：打开 Network → Filter 输入
prefetch，勾选 “All”，刷新后找Initiator: Other+Priority: low的条目；若没出现，先检查 onload 是否已触发 - 字体类资源务必在 Application → Cache Storage 或 Fonts 面板里确认是否真正进入字体缓存（而不仅是下载完成）
- 跨域 prefetch 若静默失败，Network 里可能只显示
net::ERR_FAILED，但控制台无提示 —— 要靠状态码和响应头反推
真正难的不是写对语法，而是判断「这个资源到底属于当前页紧急需求，还是未来页潜在需求」；一旦归类错误，优化就变成负优化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
