prefetch在电商中需精准触发：用户悬停按钮200ms后动态注入，匹配as="script"/"document"/"style"，避免与preload混用、跨域或无缓存导致失效。
prefetch 在电商转化链路里不是“越早写越有效”，而是必须卡在用户行为信号明确、但尚未跳转前的窗口期——写早了浪费带宽，写晚了没时间下载，写错类型或路径则根本不会发请求。
什么时候该触发 prefetch：看用户真实动作，不是页面加载完成
电商详情页预取下单页、购物车页预取支付页，不能靠 window.onload 后自动触发。用户可能刚进详情页就点击“立即购买”，此时 onload 还没触发，prefetch 压根不启动。
- 推荐在用户鼠标悬停“加入购物车”按钮 200ms 后，用
document.createElement('link')动态注入prefetch—— 不是靠 HTML 静态声明 - 表单输入邮箱后通过正则校验通过，再预取收货地址页的
/checkout/address.html（as="document"） - 不要在首页 onload 后批量预取所有商品页：用户只点第 3 个，其余 19 个资源白下，移动端流量和缓存污染立刻显现
as 属性写错，等于没写
电商场景里常见资源类型必须匹配准确的 as 值，否则浏览器降级为 as="document" 或直接忽略：
- 预取下单 JS chunk：
as="script"，不是as="fetch"或留空 - 预取支付页 HTML：
as="document"，不是as="html"（无效） - 预取关键 CSS（如订单确认页样式）：
as="style"，不是as="css" - 如果目标 HTML 里含服务端插入的 nonce 或一次性 token，
as="document"预取后缓存的 HTML 渲染时会因 CSP 校验失败而空白——这种页根本不适合prefetch
为什么 Network 面板看不到请求？别急着改代码
写了 <link rel="prefetch" href="/order/submit.js" as="script"> 却没看到请求，大概率不是语法错，而是以下任一条件未满足：
- Chrome DevTools 默认过滤
prefetch类型请求 —— 必须手动勾选左上角 “prefetch” 过滤器，或清空所有筛选 - 用户快速关闭标签页或跳转到其他域名，浏览器主动取消请求（Network 里显示
cancelled） - 目标资源返回
Cache-Control: no-store或max-age=0，浏览器认为“不值得缓存”，直接跳过请求 - href 是协议相对地址（如
//cdn.example.com/submit.js），被浏览器判定为非法 URL，静默忽略 - 跨域（哪怕只是端口不同）—— prefetch 不触发 DNS 查询，Network 里连 pending 状态都不会出现
和 preload 混用同一资源？带宽和缓存都浪费
电商首页同时写了 <link rel="preload" as="script" href="/order/submit.js"> 和 <link rel="prefetch" as="script" href="/order/submit.js">，Chrome 会发两次独立请求：
- preload 走高优队列，进当前页专用缓存分区，跳转后失效
- prefetch 走低优空闲队列，进常规 HTTP 缓存，供下一页复用
- 两者不共享缓存，也不合并请求，Network 里能看到两个条目，
Initiator分别标为preload和prefetch - 构建工具（如 Webpack 的
/* webpackPrefetch: true */）自动生成的 prefetch，容易和手写的 preload 冲突，建议统一由构建配置管理
真正难的不是写那行 <link>，而是判断用户下一步到底会不会点、什么时候点、点完之后资源是否还能用——这些没法靠静态声明解决，得靠交互信号 + 动态注入 + 服务端路径稳定性保障。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
