prefetch 不是当前页非关键资源预加载的解法，它仅在 window.onload 后为空闲时缓存资源供后续页面复用；当前页应使用 preload，并正确设置 as 属性、路径及字体 crossorigin。
prefetch 不是“非关键资源预加载”的通用解法
它压根不是为当前页服务的——rel="prefetch" 只会在 window.onload 后、浏览器空闲时，尝试把目标资源存进 HTTP 缓存，供**后续页面**复用。你把它用在当前页的“非关键资源”上，基本等于没写：既不提升首屏，也不保证执行，还可能挤占真正关键资源的带宽。
想预加载当前页的非关键资源，该用 preload 而不是 prefetch
rel="preload" 才是干这事的：提前拉取当前页稍后要用、但又不阻塞渲染的资源，比如懒加载图片的占位图、交互触发前的 JS 模块、滚动到底部才显示的 CSS。
-
as必须写对：as="image"（图片）、as="script"（JS）、as="style"（CSS），漏了或写错（如as="js"）会导致降级为普通 fetch，无法复用缓存 - 路径必须可解析：推荐用绝对路径（
/assets/lazy.js）或根相对路径（/img/placeholder.png），避免./或协议相对路径（//cdn...） - 别和
<img src>或import()重复声明同一资源，否则 Chrome/Safari 可能双下 - 对字体要额外加
crossorigin属性，哪怕同源——WOFF2 字体没它，Chrome 直接拒绝应用
prefetch 真正该用在哪？只限明确路径 + 高概率跳转
如果你确实想用 rel="prefetch"，它唯一靠谱的场景是：用户下一步极大概率会访问的静态资源，且路径固定、无动态参数、体积适中（
- 典型例子：
<link rel="prefetch" href="/checkout.js" as="script">（登录后 90% 进结算页） - 分页第 2 页 HTML：
<link rel="prefetch" href="/list?page=2" as="document">→ 错！动态 URL 会被忽略；应写成/pages/list-2.html这类真实静态文件 - SPA 路由对应 chunk：
<link rel="prefetch" href="/assets/ProfilePage.abc123.js" as="script">，前提是构建产物路径稳定 - 千万别 prefetch 整页 HTML：服务端插入的
nonce、CSRF token 会让缓存失效，白下载
验证 prefetch 是否生效，别只看 Network 面板
Chrome DevTools 默认隐藏 prefetch 请求，Network 面板里搜 prefetch 并勾选类型才能看到；更可靠的验证方式是：跳转到目标页后，看该资源的 Size 列是否显示 from Prefetch Cache 或状态码为 304/200 (from memory cache)。
立即学习“前端免费学习笔记（深入）”；
- 如果没看到，先检查
window.onload是否已触发（页面是否有长任务阻塞） - 再确认目标 URL 同源、路径合法、响应头含
Cache-Control: public, max-age=31536000 - Safari 对
as="document"支持极差，iOS 16.4 前基本无效；优先用as="script"或as="style" - 用户开了“节省流量”模式、低电量、2G 网络，Chrome 会直接跳过 prefetch —— 这个行为不可控，别硬调
