prefetch请求未发出的主因是未满足onload完成、浏览器空闲、页面未卸载三条件；其次为as属性错误、跨域或路径不合法、节省流量模式开启、cache-control禁止缓存等。
写了 <link rel="prefetch"> 却没看到请求发出？不是代码写错了，而是浏览器根本没到执行它的时机。
prefetch 请求为什么压根不发
浏览器对 prefetch 有三重硬性守门条件：页面必须触发 window.onload、主线程处于空闲状态、页面尚未卸载（没跳转/刷新）。任意一条不满足，请求就卡住不动。
- 页面里有长任务（比如同步脚本、大量 DOM 操作）阻塞主线程，
onload延迟几百毫秒 → prefetch 永远等不到“空闲” - 用户开了 Chrome/Edge 的“节省流量”模式 → 浏览器直接跳过所有 prefetch 请求
- 目标资源返回了
Cache-Control: no-store→ 浏览器连缓存都不建，干脆不发请求 - Network 面板默认隐藏 prefetch 请求 → 必须手动在过滤框输入
prefetch才能看到
as 属性写错等于没写，且完全静默失效
as 不是可选装饰，它决定了浏览器用哪条缓存路径、加什么 Accept 头、是否走 CORS。写错或漏掉，请求大概率降级为普通 fetch，甚至被忽略——而且不报错、不警告。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 预取 JS 文件 → 必须写
as="script"（as="js"或as="fetch"都无效） - 预取 HTML 页面 →
as="document"（Safari/iOS 16.4 前基本不支持） - 预取 CSS →
as="style"（as="css"会被忽略） - 预取字体 →
as="font"（注意：prefetch不触发 CORS 预检，跨域字体静默失败） - 填
as="json"或as="image"→ 浏览器直接丢弃该<link>，Network 里毫无痕迹
路径和同源是硬门槛，动态插入基本无效
prefetch 只在 HTML 解析阶段被识别，且目标 URL 必须与当前页同源（协议、域名、端口全一致）。跨域 prefetch 在 Firefox/Safari 中基本被无视；Chrome 虽支持，但需服务端配合 CORS，实际极少生效。
- ✅ 绝对路径：
href="/js/detail.js" - ✅ 根相对路径：
href="/assets/main.css" - ❌ 相对路径：
href="./main.css"（子目录下解析失败） - ❌ 协议相对：
href="//cdn.example.com/xxx.js"（非同源，且解析可能出错） - JS 动态创建并
append的<link>→ 99% 被忽略（HTML 解析期已过） - Webpack 等构建工具自动生成的 prefetch，若未配
publicPath或base，容易产出错误路径
别把 preload 当 prefetch 用
rel="preload" 只对当前页面有效，页面跳转后预加载即终止，缓存也不跨会话复用。想让资源在下一页直接命中，必须用 prefetch 或 preconnect。
-
preload的Initiator是preload，且只存在于当前页生命周期内 -
prefetch的Initiator是prefetch，Priority 应为Low；若看到Highest，说明误用了preload - 下一页要从 CDN 加资源？先写
<link rel="preconnect" href="https://cdn.example.com" crossorigin>，再跟prefetch，能省掉 DNS+TCP+TLS 的延迟 - 不要在
prefetch中写as="font"—— 字体需同域或显式crossorigin，而prefetch不触发 CORS 预检，容易静默失败
最容易被忽略的是：prefetch 不是“写完就发”，它是浏览器在空闲时才发起的低优先级行为；一旦你把它当成 preload 去压资源、抢带宽，反而会拖慢首屏，还看不到效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
