ReactJs 性能 ~ Web Workers 用于重计算 ~

Source: Dev.to

当 Web Workers 有用时

• 在浏览器中处理图像或视频
• 处理大型数据集（排序、过滤、转换）
• 执行 CPU‑密集型计算（例如，模拟、分析）
• 解析大型文件，如 CSV、JSON 或 XML
• 运行加密或散列操作
• 管理实时数据流而不阻塞 UI

Web Worker 实现示例

dataWorker.js

// dataWorker.js
self.addEventListener('message', event => {
  const { items, taskType } = event.data;

  const output = runBackgroundTask(items, taskType);

  self.postMessage({
    status: 'completed',
    result: output,
  });
});

function runBackgroundTask(items, taskType) {
  if (taskType !== 'transform') {
    return items;
  }

  return items.map(item => {
    return applyHeavyTransformation(item);
  });
}

function applyHeavyTransformation(item) {
  // Put CPU‑heavy logic here
  return {
    ...item,
    processed: true,
  };
}

DataProcessor.jsx

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

function DataProcessor({ items }) {
  const [result, setResult] = useState([]);
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    const backgroundWorker = new Worker(
      new URL('./dataWorker.js', import.meta.url)
    );

    backgroundWorker.addEventListener('message', event => {
      setResult(event.data.result);
      setIsRunning(false);
    });

    setIsRunning(true);

    backgroundWorker.postMessage({
      items,
      taskType: 'transform',
    });

    return () => {
      backgroundWorker.terminate();
    };
  }, [items]);

  if (isRunning) {
    return ;
  }

  return ;
}

在此示例中，耗时的转换被移到主 React 渲染流程之外。组件将原始数据发送给 Worker，等待处理后的结果返回，并在任务后台运行时保持 UI 的响应性。

按任务类型的性能比较

使用 Web Workers 前需要了解的事项

• Worker 不能直接与 DOM 交互。
• 内存与主线程隔离（SharedArrayBuffer 是一种高级变通方案）。
• 线程之间的通信会引入延迟（每条消息约 5–10 毫秒）。
• 在线程之间传递数据时必须进行序列化/反序列化。

何时真正应该使用它们？

一个经验法则是：如果一个任务耗时超过约 50 ms，它就可以考虑使用 Web Worker。
对于较短的操作，消息传递的开销可能会抵消性能提升。在这种情况下，可以考虑：

• requestIdleCallback → 当浏览器空闲时运行任务
• Simple async patterns → 避免阻塞渲染

Modern tooling makes it easier

• Vite / Webpack → 允许直接导入 worker，几乎无需配置。
• Comlink → 将消息传递抽象为类似函数调用的 API。

这些工具减少了样板代码，简化了在现代前端应用中集成后台处理的过程。

Source:

实际视角

有选择地使用 Web Workers。它们在 CPU 密集型场景中表现出色，但对于轻量任务，采用更简单的方法往往能获得更好的整体性能和可维护性。