preload是“现在就要用”，浏览器解析html时立即以high/highest优先级抢占带宽，属当前导航高优队列；prefetch是“可能以后会用”，onload后空闲时以low优先级加载，属后台空闲队列，二者缓存隔离、不共享、不复用。
preload 是“现在就要用”，浏览器一解析就抢带宽
它属于当前导航的高优资源调度队列，只要 HTML 解析到 <link rel="preload">，浏览器立刻发起请求，Priority 强制为 high 或 highest。这不是建议，是强制指令。
常见错误包括：
• 漏写 as 属性（比如只写 <link rel="preload" href="font.woff2">），浏览器降级为普通 fetch，Priority 显示 low，字体白加载；
• 字体资源没加 crossorigin，Chrome/Safari 加载完直接丢弃，控制台无报错，只表现为 FOIT 或文本渲染异常；
• 用 as="image" preload <img srcset> 中的某张图——srcset 是运行时解析的，preload 根本无法匹配，纯属占用 high 优先级通道。
prefetch 是“可能以后会用”，onload 后才看空闲不空闲
它不参与当前页性能竞争，而是进后台空闲队列：必须等 window.onload 触发、CPU 负载低、网络未拥塞、没开省流模式、内存够用，浏览器才会真正发起请求，Priority 固定为 low。
容易失效的硬条件：
• href 必须是绝对路径或根相对路径（如 /js/next.js），协议相对路径（//cdn.com/a.js）直接被忽略；
• 跨域 prefetch 基本无效，即使服务端开了 CORS，Chrome/Firefox 也不认；
• 缓存头缺失：响应没带 Cache-Control: public, max-age=31536000，下次跳转仍要重下，预取白忙；
• Firefox 默认禁用（network.prefetch-next = false），Safari 对非脚本类资源（如 .jpg、.css）支持极弱。
同一个 URL 同时 preload 和 prefetch，浏览器真会发两次请求
preload 进的是「当前导航专用缓存分区」，生命周期绑定本次页面；prefetch 进的是常规 HTTP 缓存，按 Cache-Control 存。两者完全隔离，不共享、不复用。
后果很实际：
• Chrome Network 面板里能看到两个独立请求，状态可能是 200 + 200，也可能是 200 + cancelled（用户快速跳走）；
• 即使资源体积大、带宽紧张，也不会自动合并；
• 若 preload 的资源最终没被使用（比如 JS 文件名带 hash，但 preload 写的是旧名），控制台会警告 "resource was preloaded but not used"，而 prefetch 不会报这类提示。
验证是否写对，唯一靠谱方式是看 DevTools Network 的 Priority 列
别信“写了就生效”。打开 Chrome DevTools → Network → 刷新页面 → 筛选你的资源名 → 看 Priority 列：
• preload 对应条目必须是 high 或 highest，否则就是 as 错、路径 404、或 MIME 类型不匹配；
• prefetch 条目在刷新后不会立刻出现，得等页面完全 loaded、且浏览器判定空闲了才可能看到，状态常为 pending 或直接不出现；
• 如果 prefetch 请求显示 net::ERR_FAILED，先检查是不是同源、路径是否合法，再确认服务端是否返回了正确 MIME 类型和缓存头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
