prefetch适用于高置信度跳转场景：SPA首页预取用户中心JS、电商列表页按点击率Top3预取静态商品详情页HTML、表单多步中第二步URL固定且跳转概率＞70%的JS/CSS。
prefetch 适合哪些业务预测场景
它只在用户大概率会跳转、且目标资源稳定可缓存时才值得用。不是所有“可能点”的地方都该加，加错反而浪费带宽、污染缓存。
- 单页应用（SPA）首页预取「用户中心」或「订单列表」的 JS chunk：
/assets/user-center.8a2b.js，前提是路由懒加载、路径固定、用户登录后点击率 >65% - 电商商品列表页，按历史点击率 Top 3 预取商品详情页 HTML：
/product/123.html，但必须确保该页面是纯静态渲染、无动态 nonce/token，否则预取后无法复用 - 表单多步流程中，第二步页面已构建完成、URL 固定（如
/checkout/step2），且第一步提交后跳转概率 >70%，可提前 prefetch 其 JS 和 CSS - 搜索结果页，预取「第一页结果中点击率最高的一条」详情页资源，而不是全部十条——prefetch 不是批量下载工具
为什么你写的 prefetch 在 Network 面板里看不到请求
不是代码写错了，而是浏览器根本没触发它。prefetch 的发起有硬性前置条件，缺一不可。
- 当前页面还没触发
onload：比如有长任务阻塞主线程、大图未加载完、JS 执行卡住，它就一直不发 - 用户开了“节省流量”模式（Chrome/Edge 默认跳过，Safari 直接忽略）
- 页面快速跳转或关闭标签页：浏览器主动中止 prefetch 请求，Network 里显示
cancelled - 目标资源返回了
Cache-Control: no-store或max-age=0：浏览器连缓存都不建，直接不发请求 - DevTools 默认不显示：必须手动在 Network 面板勾选
prefetch过滤器，或清空所有过滤器再刷新
as 属性写错等于白写
浏览器靠 as 决定怎么发请求：加什么 Accept 头、走哪条缓存策略、是否启用 MIME 类型校验。漏掉或写错，请求大概率被降级为普通 fetch，甚至静默丢弃。
- 预取 JS 文件必须写
as="script"：<link rel="prefetch" href="/assets/detail.4f9c.js" as="script"> - 预取 HTML 页面必须写
as="document"：<link rel="prefetch" href="/pages/checkout.html" as="document"> - 预取 CSS 必须写
as="style"：<link rel="prefetch" href="/css/detail.css" as="style"> -
as="fetch"和as="json"是无效值，浏览器不识别，也不报错，只是当普通链接处理 - 跨域资源必须加
crossorigin，但注意：Safari 和旧版 WebView 对跨域 prefetch 支持极差，建议优先同源
动态插入 link prefetch 基本无效
用 JavaScript 动态创建并插入 <link rel="prefetch">，比如 document.createElement('link') + document.head.appendChild()，在绝大多数浏览器中不会触发 prefetch 行为。
立即学习“前端免费学习笔记（深入）”；
- Chrome 要求 prefetch 必须在首屏 HTML 的
<head>中静态声明，解析时就看到，否则忽略 - Firefox 和 Safari 更严格：只认服务端直出的
<link>，JS 插入的直接跳过 - 想实现交互触发（如 hover 后 prefetch），只能用
fetch()或import()显式加载，而不是指望动态 link - 真正可控的做法是：把高置信度路径写死在 HTML 模板里；低置信度路径改用 IntersectionObserver 或按钮 focus 后调用
fetch()下载
text/plain 却声明 as="script"，都会导致缓存失效。 
