页面跳转白屏主因是关键资源加载与JS执行阻塞渲染，应通过preload预加载必用资源、拆分路由JS包、使用defer/async、内联首屏CSS及监控性能定位瓶颈。
页面跳转后白屏时间长，通常是资源加载阻塞导致
HTML5 页面跳转（比如 window.location.href 或 router.push()）后出现明显白屏，根本原因不是跳转本身慢，而是新页面的 HTML 解析、关键 JS/CSS 加载与执行被延迟。浏览器必须下载并处理 <head> 中的同步资源后，才开始渲染，期间用户看到的就是白屏。
常见诱因包括：主包 JS 过大、未拆分路由、CSS 阻塞渲染、第三方 SDK 同步注入、缺少 preload 或 preconnect 提示。
用 rel="preload" 提前加载关键资源最直接有效
对跳转目标页必用的资源（如首屏 JS、核心 CSS、字体文件），在当前页就通过 <link rel="preload"> 告知浏览器提前获取，不执行、不阻塞，但进缓存待用。
-
as属性必须指定（如as="script"、as="style"），否则可能被忽略或降级为prefetch - 只预加载「确定会用」的资源；误加非关键资源反而挤占带宽
- 动态路由场景下，可在跳转前用 JS 注入
<link rel="preload">，例如：<script> const link = document.createElement('link'); link.rel = 'preload'; link.as = 'script'; link.href = '/js/chunk-home.js'; document.head.appendChild(link); </script>
避免 render-blocking 资源是白屏优化的核心
白屏本质是「渲染被阻断」。以下操作能显著缩短首帧时间：
立即学习“前端免费学习笔记（深入）”；
- JS 脚本加上
defer（推荐）或async，避免阻塞 HTML 解析 - CSS 放
<head>，但确保体积小；过大时拆出首屏内联（<style>...</style>），其余异步加载 - 移除未使用的 polyfill 或调试工具（如
why-did-you-render在生产环境启用） - 检查是否有同步 XHR 或
document.write类代码，在现代 HTML5 中极易引发白屏延长
SPA 路由跳转白屏需额外关注 JS 执行耗时
Vue/React 等单页应用中，router.push() 后白屏往往不是网络问题，而是 JS bundle 解析 + 执行 + mount 耗时过长。尤其低端 Android 设备上，1MB 以上 JS 可能卡顿 800ms+。
- 开启 Webpack/Vite 的
code splitting，按路由分割 chunk，确保只加载当前页所需逻辑 - 避免在
beforeRouteEnter或useEffect(() => {}, [])中执行重计算、大量 DOM 操作或未节流的监听器初始化 - 使用
PerformanceObserver监控navigation和paint阶段，定位是domContentLoaded慢还是first-contentful-paint慢
真正影响白屏的是「资源何时可用」和「JS 何时执行完」，不是“有没有预加载”。很多项目加了 preload 却仍白屏，是因为预加载了错误资源，或 JS 执行逻辑本身存在隐式阻塞。动手前先用 Chrome DevTools 的 Network + Rendering 面板录一次跳转，看瓶颈卡在哪一环——这才是不可跳过的步骤。
