rel="prefetch" 单独使用无法减少跨页面白屏，因其仅低优先级预下载资源，不预建dom、不执行js、不渲染，用户跳转后仍需完整导航流程；真正有效的是结合行为触发、精确资源粒度（如路由组件chunk）、import()动态导入及preconnect提前建连。
Link prefetch 本身不能直接减少跨页面白屏，它只预取资源，不预建 DOM 或执行 JS；真正能降低白屏感知的是配合预取 + 页面模板缓存 / 预渲染，或用 import() 触发 runtime 预取并提前解析模块。
为什么 rel="prefetch" 单独写在 HTML 里对白屏没用
浏览器把 rel="prefetch" 当作低优先级后台任务，在主页面加载完、空闲时才发起请求；它不会提前创建新页面的 DOM、不会执行 JS、更不会渲染。用户点击跳转后，仍要走完整导航流程：HTML 解析 → CSS/JS 下载 → 执行 → 渲染 → 白屏结束。也就是说，prefetch 只省了“下载时间”，没省“解析+执行+渲染”这几十到几百毫秒。
- 硬写
<link rel="prefetch" href="/detail.html">在首页，Safari/iOS WebView 大概率忽略（iOS 16.4 前基本不支持） - 如果
href指向的是服务端渲染页（含动态 nonce/token），预取的 HTML 缓存后可能因 token 过期导致渲染失败 - Network 面板里看到
Status: 200 (from memory cache)≠ 页面不白屏——缓存只是省了网络请求，JS 还得 parse & run
真正起效的 prefetch 使用方式：行为触发 + 精确资源粒度
别预取整页 HTML，改预取确定会用的代码块（如路由组件 chunk），让浏览器在用户 hover 或滑入可视区时才触发，既可控又安全。
- 用
as="script"明确声明类型，避免降级成as="document"导致连带拉取一堆子资源 - 路径必须是构建后确定的 chunk 名，比如 Vite 输出的
/assets/DetailPage.abc123.js，不是/detail - React 中推荐直接调用
import('./DetailPage')—— 浏览器自动按需 prefetch，且兼容性比rel="prefetch"好得多 - 记得同时 prefetch 对应的 CSS chunk（如果分离）和关键字体（但字体建议用
rel="preload"，prefetch 不触发 CORS 预检，容易静默失败）
prefetch 必须搭配 preconnect 才能发挥最大效果
如果下一页资源来自 CDN 或第三方域名，光 prefetch 不够——DNS 查询、TCP 握手、TLS 协商加起来可能耗掉 300ms+。这时必须提前建连。
- 写
<link rel="preconnect" href="https://cdn.example.com" crossorigin>，crossorigin属性不能少，否则 Safari 和旧版 Chrome 直接忽略 - preconnect 最好在 prefetch 前 100ms 以上触发，确保连接真正就绪；不要一口气 preconnect 超过 4–6 个域名，会挤占主站连接数
- 验证是否生效：Network 面板筛选
preconnect请求，Initiator 应为preconnect，且 Timing 里 DNS/TCP/TLS 阶段时间明显缩短
最常被忽略的一点：prefetch 的资源必须和目标页实际加载的资源完全一致（路径、hash、CORS 设置），否则缓存不命中。哪怕只是多了一个查询参数，或服务端返回了不同 ETag，浏览器就会重新下载——你白忙活了，用户也照白屏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
