如何延迟渲染耗时组件 解决React标签切换卡顿问题

问题根因 #

你遇到的卡顿本质是两个问题叠加：

1. 标签切换时默认会一次性渲染当前标签下所有组件，SlowRenderComponent里的亿次级同步循环会直接阻塞JS主线程，导致浏览器没法立刻绘制已经准备好的轻量组件内容，用户点了标签要等1-2秒才能看到反馈
2. Suspense只对异步加载场景生效（比如React.lazy拆包、异步数据请求抛出Promise的情况），对这种组件内部同步执行的重计算完全无效，所以只有首次懒加载组件时能看到fallback，后续挂载时的同步阻塞Suspense根本拦不住。

实现思路 #

核心逻辑分两步走，就能做到标签切换秒开、用户无感知：

• 切换标签时优先渲染轻量组件，等浏览器把这部分内容绘制完成、进入空闲状态后，再挂载耗时组件
• 把耗时组件里的重计算从同步渲染流程里剥离，不要让长循环堵住主线程，保证用户交互始终流畅
• 耗时组件挂载前放一个和最终内容高度一致的占位元素，避免内容加载后出现布局跳动

具体实现代码 #

第一步：改造标签页逻辑，延后挂载耗时组件 #

通过requestIdleCallback控制慢组件的挂载时机，确保轻量内容优先渲染：

import { useState, useEffect } from 'react';

function App() {
  const [tab, setTab] = useState(1);
  const [mountSlowComp, setMountSlowComp] = useState(false);

  useEffect(() => {
    if (tab === 2) {
      // 等当前帧绘制完成、浏览器空闲时再挂载慢组件，最多延迟100ms避免内容出现过慢
      const idleId = requestIdleCallback(() => setMountSlowComp(true), { timeout: 100 });
      return () => {
        cancelIdleCallback(idleId);
        setMountSlowComp(false);
      };
    }
    setMountSlowComp(false);
  }, [tab]);

  return (
    <div>
      <button onClick={() => setTab(1)}>tab 1</button>
      <button onClick={() => setTab(2)}>tab 2</button>

      {tab === 1 && <div>Hello World</div>}
      {tab === 2 && (
        <div>
          <FastRenderComponent />
          <FastRenderComponent />
          {/* 占位高度和慢组件最终高度一致，避免布局偏移 */}
          {mountSlowComp ? <SlowRenderComponent /> : <div style={{ minHeight: 24 }} />}
        </div>
      )}
    </div>
  );
}

第二步：优化慢组件，避免重计算阻塞主线程 #

光延后挂载还不够，慢组件挂载时的同步大循环还是会短暂卡主线程，二选一优化即可：

方案A：Web Worker跑计算（体验最优，完全不卡主线程）

把重计算逻辑丢到独立的Worker线程跑，主线程全程不阻塞：

// SlowRenderComponent.jsx
import { useState, useEffect } from 'react';

export default function SlowRenderComponent() {
  const [calcResult, setCalcResult] = useState(null);

  useEffect(() => {
    // 初始化计算Worker，路径按自己项目的Worker配置调整即可
    const calcWorker = new Worker(new URL('./calc.worker.js', import.meta.url));
    calcWorker.onmessage = (e) => {
      setCalcResult(e.data);
      calcWorker.terminate();
    };
    calcWorker.postMessage('start');
    return () => calcWorker.terminate();
  }, []);

  return <div>Slow Component, Calculation={calcResult ?? '加载中...'}</div>;
}

对应的Worker文件calc.worker.js：

self.onmessage = () => {
  let calculation = 0;
  for (let i = 0; i < 2 * 1e8; i++) {
    calculation += i + Math.ceil(Math.random() * 100);
  }
  self.postMessage(calculation);
};

方案B：时间切片拆分计算（无需Worker，兼容旧项目）

如果项目不方便接入Worker，就把长循环拆成多个小批次，每批放到浏览器空闲时间执行，不阻塞用户交互：

import { useState, useEffect } from 'react';

export default function SlowRenderComponent() {
  const [calcResult, setCalcResult] = useState(null);

  useEffect(() => {
    let total = 0;
    let currentIndex = 0;
    const TOTAL_COUNT = 2 * 1e8;
    // 每批跑100万次循环，单次执行时长控制在16ms以内，避免掉帧
    const BATCH_SIZE = 1000000;

    const runCalcBatch = () => {
      const batchEnd = Math.min(currentIndex + BATCH_SIZE, TOTAL_COUNT);
      for (; currentIndex < batchEnd; currentIndex++) {
        total += currentIndex + Math.ceil(Math.random() * 100);
      }
      if (currentIndex < TOTAL_COUNT) {
        requestIdleCallback(runCalcBatch);
      } else {
        setCalcResult(total);
      }
    };

    runCalcBatch();
  }, []);

  return <div>Slow Component, Calculation={calcResult ?? '加载中...'}</div>;
}

补充说明 #

如果是React 18及以上版本，可以配合useTransition把标签切换标记为非紧急更新，进一步降低交互优先级，但核心还是要把同步阻塞的重计算从主线程渲染流程里拆出去，否则任何上层API都没法解决同步代码占住线程导致的卡顿。

内容的提问来源于stack exchange，提问作者Dorki