prefetch 不参与当前页面带宽竞争，只在 window.onload 后空闲时以 Low 优先级发起请求；必须同源、绝对或根相对路径、正确声明 as 属性（如 as="script"），否则静默失效且无报错。
prefetch 不参与当前页面带宽竞争，它根本不会和首屏资源抢优先级——但写错位置、类型或跨域，它连请求都不会发。
prefetch 的 Low 优先级只在空闲时生效
浏览器不会在页面还在加载 CSS/JS 或渲染首屏时发起 prefetch 请求。它必须等 window.onload 触发、主线程空闲、网络无高优请求（如 preload、同步 script）后才尝试拉取。这意味着：
- 即使你写了
<link rel="prefetch" href="/next.js" as="script">，只要页面还没 onload，Network 面板里就看不到任何对应请求 - Chrome 默认过滤 prefetch 类型请求，需手动勾选 Network 面板左上角的 “prefetch” 过滤器才能看见
- Priority 列显示为
Low才算正常；如果看到Highest，说明你误用了preload，不是 prefetch 配置问题
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 只在 HTML 解析阶段被识别，且目标 URL 必须与当前页同源（协议、域名、端口全一致）。否则：
立即学习“前端免费学习笔记（深入）”；
- 跨域请求不会发起 DNS 查询，Network 面板里连 OPTIONS 都没有，更别说 fetch
- 用 JS 动态创建并 append 到
document.head的 link，99% 情况下被忽略——解析期已过，浏览器不认 - 路径必须是绝对路径或根相对路径（如
/assets/main.css），不能是./main.css，否则子目录下解析失败 - 构建工具（如 Webpack）自动生成的 prefetch，若未配置 publicPath 或 base，容易产出错误路径
和 preload 同时存在会引发重复请求
同一个 URL 如果既被 preload 又被 prefetch 声明，浏览器会发两次独立请求，且互不共享缓存：
-
preload进的是当前页专用缓存分区，跳转后即失效 -
prefetch进的是常规 HTTP 缓存，供下一页复用 - Network 面板能看到两个条目，Initiator 分别是
preload和prefetch，Priority 一高一低 - 尤其注意：Webpack 的
/* webpackPrefetch: true */和手写<link rel="preload">很容易撞车，建议统一交给构建工具管理
真正容易被忽略的点是：prefetch 不提供任何 JS 接口，也不执行脚本、不解析 HTML。它只是把文件丢进 HTTP 缓存——下一页能否快，取决于你有没有配好 Cache-Control，以及用户是否真点了那个链接。
