React 渲染性能实战：用 Web Worker 把重计算移出主线程

主线程为什么会被卡住

React 的渲染、事件处理、动画都跑在浏览器的主线程上。一旦某个事件回调里做了重计算，比如解析大文件、做图像像素处理、跑复杂排序或加密，主线程就会被占满，页面出现掉帧、输入无响应。这类问题靠 useMemo 救不了，因为它同样发生在主线程。

真正的出路是把这部分计算挪到 Web Worker。Worker 跑在独立线程，不阻塞 UI，算完再把结果回传。下面用一个关键词频统计的例子说明完整链路。

把计算放进 Worker

worker 文件只负责纯计算，不碰 DOM：

// wordcount.worker.ts
self.onmessage = (e: MessageEvent<string>) => {
  const text = e.data;
  const map = new Map<string, number>();
  for (const word of text.toLowerCase().split(/\s+/)) {
    if (!word) continue;
    map.set(word, (map.get(word) ?? 0) + 1);
  }
  const top = [...map.entries()]
    .sort((a, b) => b[1] - a[1])
    .slice(0, 20);
  self.postMessage(top);
};

在 React 里封装成 Hook

用一个 Hook 把 Worker 的生命周期和 Promise 收口，组件侧只拿到一个异步函数和一个 loading 状态：

// useWorkerTask.ts
import { useCallback, useEffect, useRef, useState } from "react";

export function useWordCount() {
  const workerRef = useRef<Worker>();
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<[string, number][]>([]);

  useEffect(() => {
    const w = new Worker(new URL("./wordcount.worker.ts", import.meta.url), {
      type: "module",
    });
    workerRef.current = w;
    w.onmessage = (e) => {
      setResult(e.data);
      setLoading(false);
    };
    return () => w.terminate();
  }, []);

  const run = useCallback((text: string) => {
    setLoading(true);
    workerRef.current?.postMessage(text);
  }, []);

  return { run, result, loading };
}

组件里这样用

function Analyzer() {
  const { run, result, loading } = useWordCount();
  return (
    <div>
      <button onClick={() => run(bigText)} disabled={loading}>
        {loading ? "计算中" : "统计词频"}
      </button>
      <ul>
        {result.map(([w, n]) => (
          <li key={w}>{w}: {n}</li>
        ))}
      </ul>
    </div>
  );
}

几个工程化要点

用 new URL(..., import.meta.url) 让打包器自动识别 Worker 入口，Vite 和 webpack 5 都支持，免手动配 loader。
Worker 之间不能直接共享大对象，传递的是拷贝（结构化克隆）。超大数据考虑用 Transferable 把 ArrayBuffer 所有权转移过去，零拷贝。
如果任务很短（小于几毫秒），Worker 的创建和通信开销反而更亏，阈值要靠真实测量定。
需要多个并发任务时，可以建一个 Worker 池，按任务队列分发，而不是每次都 new 一个。

把重计算移出主线程后，最直观的收益是交互不再掉帧。配合 React 的并发特性（如 startTransition），还能进一步把渲染本身也降级为非阻塞，主线程始终保持响应。