React 移动端首屏白屏时间太长怎么优化？

♫柯豫提问于 2026-03-08 10:31:21 阅读 13

移动

我用 React 开发了一个移动端 H5 页面，上线后发现从点击链接到页面内容渲染出来之间有明显白屏，大概 1.5 秒左右。我已经尝试了代码分割和懒加载，但首屏组件还是得等 JS 全部下载完才显示，用户反馈体验很差。

有没有办法在 JS 加载完成前先展示骨架屏或者静态内容？下面是我入口组件的简化代码：

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

我来解答赞 1 收藏

反馈

1 条解答

诸葛欣亿 Lv1

移动端白屏确实烦人，我来给你几个实战验证过的方案。先用这个最简单的方案，在index.html里直接写静态骨架屏：

然后加个CSS过渡效果，等React加载完自动替换：

.skeleton {

  opacity: 1;

  transition: opacity 0.3s ease;

}

.skeleton-hidden {

  opacity: 0;

}

最后改造你的入口文件，加载完成后再隐藏骨架屏：

const root = document.getElementById('root');

const skeleton = document.querySelector('.skeleton');



const appRoot = createRoot(root);

appRoot.render();



// React渲染完成后移除骨架屏

window.addEventListener('DOMContentLoaded', () => {

  skeleton.classList.add('skeleton-hidden');

});

另外几个优化方向：
1. 检查下webpack配置，把react和react-dom换成CDN引入
2. 使用service worker预缓存关键资源
3. 考虑用next.js这类服务端渲染方案

这些方案我们项目都用过，骨架屏+CDN通常能减少0.5-1秒白屏时间。

2026-03-08 11:04