移动端刷新白屏闪烁本质是首帧渲染前关键样式未就绪，浏览器用默认白色背景绘制；解决需在head内联body背景色及首屏关键CSS，并配合SSR或hydration优化。
移动端刷新时顶部白屏闪烁，本质是首帧渲染前 HTML 已输出、但关键样式未就绪，浏览器被迫用默认样式（通常是白色背景）绘制 body 或根容器——这不是 bug，而是渲染流水线的必然阶段。解决它不靠“修复”，而靠“预埋”和“抢占时机”。
为什么加 body { background-color: #000 } 能快速止闪
白屏最直观的表现就是顶部一帧纯白，根源在于：body 默认背景透明或白色，且未被任何 CSS 覆盖前，浏览器会立即用该默认值绘制首帧。只要在 HTML 的 <head> 里内联一行背景色，就能让这一帧“有内容可画”：
-
body是最早参与布局的元素之一，它的背景色会在 CSSOM 构建完成前就被解析器识别（尤其当写在<style>内联块中） - 颜色值越简单越好，避免渐变、
url()或变量，否则仍可能触发阻塞 - 必须写在
<head>中的<style>里，不能靠外部 CSS 文件加载后才生效 - 若页面主色调不是纯黑/白，选最接近的 solid 颜色（如
#f8f9fa），别用半透或阴影
只靠 background-color 不够：FOUC 仍会发生
单纯设 background-color 只压住了“白”，但文字错位、按钮跳动、布局重排等 FOUC（Flash of Unstyled Content）现象还会存在——因为其他样式（字体、padding、flex 布局）依然没来得及加载。
- 真正要内联的是“首屏关键 CSS”：影响 viewport 内所有可见节点的最小样式集，比如
.header、.hero-title、.primary-btn的 color / font-size / display / margin - 工具推荐用
criticalCLI 提取，或手动梳理后注入 HTML 模板；体积控制在 ≤14KB，否则 HTML 解析反而变慢 - 禁用任何
@import、url(…)引用，它们会让内联样式失效或延迟应用 - 验证方式：DevTools → Network → Offline，刷新页面——首屏文字/结构是否仍清晰可见？
别让 JS 主题切换毁掉内联效果
很多项目用 JS 读取 localStorage 切 dark mode，结果 DOM 渲染完才加 dark class，导致先闪一次浅色再跳深色——这比白屏更刺眼。
立即学习“前端免费学习笔记（深入）”；
- 把主题 class 直接写死在
<html class="dark">或<body class="light">上，由服务端或构建时决定 - 如果必须 JS 控制，用
<style media="print">占位，JS 加载完成后移除 media 属性并注入对应样式，实现无感过渡 - 避免在
DOMContentLoaded后才操作 class，此时首帧早已完成 - 检查第三方库（如 styled-components）是否动态注入样式，它们会绕过内联逻辑，造成二次重绘
移动端跳转时的“新页面闪”是另一回事
注意区分：页面刷新（F5 / 地址栏回车）的闪，和路由跳转（router.push / uni.navigateTo）的闪——后者不是 CSS 加载问题，而是新页面首帧前合成图层未建立。
- 跳转闪需在目标页根容器（如
.page-wrapper）上加transform: translateZ(0)+backface-visibility: hidden，二者缺一不可 - 不要加在
<body>或<html>上，部分 WebView 对这两个标签的硬件加速支持不稳定 - 避免用
will-change: transform，它持续占内存，且对跳转场景无加速效果 - uni-app 项目重点检查是否加在
.uni-page-wrapper，而非仅导航栏组件
最易被忽略的一点：内联样式和 background-color 只解决“视觉起点”，如果首屏 DOM 本身是空的（比如 Vue/React 挂载点为空，等 JS 才渲染），那再快的 CSS 也无内容可画——此时必须配合 SSR 或 hydration 优化，否则所有 CSS 层面的努力都只是在美化白屏。
