prefetch不会抢当前带宽但写错即失效，network面板默认隐藏请求需手动勾选过滤器；必须静态写入html、指定正确as值、使用绝对或根相对路径，且仅在onload后空闲时低优先级触发。
prefetch 不抢当前页面带宽，但写错就等于没写——它根本不会发请求，也不会报错。
prefetch 请求为什么 Network 面板里看不到
Chrome 默认隐藏 prefetch 请求，必须手动开启过滤器才能看见。即使你写了 <link rel="prefetch" href="/next.js" as="script">，只要没勾选 Network 面板左上角的 “prefetch” 过滤项，就找不到对应条目。
- Priority 列显示为
Low才是正常行为；如果看到Highest，说明你误用了preload - Initiator 列必须是
prefetch，不是parser或script，否则是解析期未识别或 JS 动态插入失败 - 路径不是绝对或根相对（如写成
./js/next.js）时，在子目录页会解析失败，请求静默丢弃
as 属性写错会导致 prefetch 完全失效
as 不是可选提示，它决定浏览器是否发起请求、如何缓存、是否跨域兼容。漏写、写错、乱填都会让 prefetch 归零。
- 漏写
as：浏览器默认降级为as="document"，对 JS/CSS 等资源可能无法复用缓存 - 把字体写成
as="font"：prefetch 不触发 CORS 预检，跨域字体请求静默失败，无任何错误提示 - 填
as="fetch"或as="json"：浏览器直接忽略该<link>，Network 里彻底没痕迹 - 正确写法示例：
<link rel="prefetch" href="/js/detail.bundle.js" as="script">、<link rel="prefetch" href="/page/2.html" as="document">
prefetch 的“低优先级”只在空闲时生效，不是“不重要”
它真等到 window.onload 触发、主线程空闲、网络无高优请求（如 preload、同步 <script></script>）后才发起。这不是延迟，而是调度策略。
- 首页 banner 图加
rel="prefetch"？浏览器会拖到所有 JS/CSS 加完、用户都开始滚动了才拉，首屏 LCP 直接多等 300ms+ - 同一 URL 同时声明
preload和prefetch：浏览器发两次独立请求，缓存不共享，preload进当前页专用缓存，prefetch进 HTTP 缓存 - 跳转后资源没走缓存（状态码不是
200 (from memory cache)或304）？大概率是目标资源没配Cache-Control，预取白做了
动态插入 prefetch 在多数场景下无效
prefetch 只在 HTML 解析阶段被识别。JS 创建并 append 的 <link>，99% 情况下被浏览器忽略——解析期已过，它不认。
- 静态写死所有“下一集”链接？用户可能跳过、退出、切清晰度，移动端流量浪费严重
- 更可控的做法是结合用户行为触发，比如视频播放进度 >90% 时调用：
prefetchNext('/assets/Episode2Player.abcd123.js') - Webpack 自动生成的
/* webpackPrefetch: true */若未配publicPath，路径容易出错，得检查构建产物中 href 是否为绝对或根相对
真正难的不是写对那一行 <link>，而是判断“这个资源到底该不该 prefetch”——它不解决加载慢，只解决“用户点下去之后那一下快不快”。漏掉同源限制、路径格式、as 类型中的任意一环，整条链路就断在起点，还查不到原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
