prefetch 未发起请求是因为需同时满足页面已触发 window.onload、主线程空闲、网络无高优任务；常见原因包括长任务延迟 onload、节省流量模式启用、Cache-Control 禁止缓存、DevTools 未开启 prefetch 过滤器、as 属性写错或缺失。
prefetch 写在 HTML 里却没发起请求？先看这三件事
写了 <link rel="prefetch" href="/next-page.html"> 却在 Network 面板里找不到请求，不是代码漏了，而是浏览器压根没启动它。它必须同时满足：页面已触发 window.onload、主线程空闲、网络当前无高优任务（比如 preload 或同步脚本）。常见卡点包括：
- 页面里有长任务（如未拆分的巨型 JS）拖慢 onload，导致 prefetch 延后甚至被取消
- 用户开了“节省流量”模式（Chrome/Edge 默认跳过 prefetch）
- 目标 URL 返回了
Cache-Control: no-store或max-age=0，浏览器连请求都不发 - 你没在 DevTools Network 面板手动勾选
prefetch过滤器——Chrome 默认隐藏这类请求
as 属性写错等于白写，且完全不报错
as 不是可选项，它直接决定浏览器是否识别这个 prefetch、走哪条缓存路径、加什么 Accept 头。写错或漏掉，请求大概率静默失效，Network 里连痕迹都没有。
- 预取 JS 文件 → 必须写
as="script"（as="js"或as="fetch"都无效） - 预取 CSS → 必须写
as="style"（as="css"不认） - 预取字体 →
as="font"，但注意：prefetch 不触发 CORS 预检，跨域字体静默失败 - 预取 HTML 页面 → 可写
as="document"，但 Safari 在 iOS 16.4 之前基本忽略，不推荐
静态写死 href="/next-page.html" 是危险操作
直接 prefetch 整个 HTML 文件，看似简单，实际问题一堆：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 会连带拉取该 HTML 中所有
<script>、<link rel="stylesheet">、图片等资源，流量远超预期 - 服务端动态插入的
<script nonce="xxx">会导致缓存后的 HTML 执行失败 - 路径必须是绝对路径或根相对路径（如
/assets/DetailPage.abcd123.js），./detail.js在子目录下会解析失败 - 跨域 prefetch 基本无效：Firefox/Safari 直接无视，Chrome 虽支持但需服务端配 CORS，极少落地
真正可控的做法：hover 触发 + import() 替代
别再硬塞 <link rel="prefetch"> 到 <head> 里。用户没明确意图时就预取，纯属浪费流量和服务器压力。
立即学习“前端免费学习笔记（深入）”；
- 用 hover 或滚动进入可视区作为触发条件，延迟 200ms 创建并插入
<link rel="prefetch">，避免误触 - 只预取确定的 chunk 路径（如 Vite 构建后的
/assets/DetailPage.xxxx.js），不是路由地址/detail - 如果“下一页”是代码分割模块（如 React 的
lazy(() => import('./DetailPage'))），直接调用import('./DetailPage')更可靠——这是 runtime prefetch，优先级略高于rel="prefetch"，且所有现代浏览器都支持 - 对应 CSS 分离时（如
DetailPage.xxxx.css），记得一并 prefetch；字体优先用rel="preload"，不是 prefetch
