Chrome下向Web Worker传递含循环引用树形数据的异常问题

我之前也碰到过类似的Chrome下Web Worker处理循环引用大数据的坑，咱们一步步拆解问题和解决方案：

问题根源分析 #

虽然Web Worker的结构化克隆算法理论上支持循环引用，但Chrome在处理大规模带循环引用的对象时，存在隐性的序列化阈值或内存限制。当节点数量达到一定规模，克隆过程中跟踪循环引用的内部机制可能出现内存溢出或逻辑异常，导致Worker抛出错误。

可行的解决方案 #

1. 分批发送节点数据 #

不要一次性把整个树形节点数组发给Worker，拆分成小批次逐步发送，降低单次序列化的压力：

// 主线程代码
const BATCH_SIZE = 150; // 根据实际测试调整批次大小
let currentBatchIndex = 0;

function sendNextBatch() {
  const batch = rootNodes.slice(currentBatchIndex, currentBatchIndex + BATCH_SIZE);
  if (batch.length === 0) {
    worker.postMessage({ type: 'ALL_BATCHES_SENT' });
    return;
  }
  worker.postMessage({ type: 'NODE_BATCH', data: batch });
  currentBatchIndex += BATCH_SIZE;
}

// 监听Worker处理完成的通知，继续发送下一批
worker.onmessage = (e) => {
  if (e.data.type === 'BATCH_PROCESSED') {
    sendNextBatch();
  }
};

// 启动分批发送
sendNextBatch();

// Worker线程代码
self.onmessage = (e) => {
  if (e.data.type === 'NODE_BATCH') {
    // 处理当前批次的节点渲染逻辑
    self.postMessage({ type: 'BATCH_PROCESSED' });
  } else if (e.data.type === 'ALL_BATCHES_SENT') {
    // 所有节点处理完成，执行收尾操作
  }
};

2. 移除循环引用后序列化，Worker端重建引用 #

主动将带循环引用的节点转换成无循环的普通对象，通过唯一ID标记引用关系，Worker收到后再重新构建树形结构：

// 主线程：序列化节点（移除循环引用）
const nodeIdMap = new Map();
let idCounter = 0;

function serializeNode(node) {
  if (nodeIdMap.has(node)) {
    return { refId: nodeIdMap.get(node) };
  }
  const nodeId = idCounter++;
  nodeIdMap.set(node, nodeId);
  return {
    id: nodeId,
    // 保留节点自身的业务数据
    content: node.content,
    // 用ID代替直接引用
    next: node.next ? serializeNode(node.next) : null,
    previous: node.previous ? serializeNode(node.previous) : null,
    parent: node.parent ? serializeNode(node.parent) : null
  };
}

const serializedRoots = rootNodes.map(serializeNode);
worker.postMessage({
  type: 'SERIALIZED_DATA',
  data: serializedRoots,
  nodeMap: Array.from(nodeIdMap.entries())
});

// Worker线程：重建树形引用
self.onmessage = (e) => {
  const { data: serializedRoots, nodeMap } = e.data;
  const realNodeMap = new Map();
  // 先创建所有节点实例
  serializedRoots.forEach(serialized => {
    realNodeMap.set(serialized.id, {
      content: serialized.content,
      next: null,
      previous: null,
      parent: null
    });
  });
  // 再逐个填充引用关系
  serializedRoots.forEach(serialized => {
    const node = realNodeMap.get(serialized.id);
    node.next = serialized.next ? realNodeMap.get(serialized.next.refId) : null;
    node.previous = serialized.previous ? realNodeMap.get(serialized.previous.refId) : null;
    node.parent = serialized.parent ? realNodeMap.get(serialized.parent.refId) : null;
  });
  const rootNodes = Array.from(realNodeMap.values()).filter(node => !node.parent);
  // 开始处理渲染逻辑
};

3. 辅助排查：确认阈值和内存情况 #

可以通过Chrome DevTools的Memory面板监控序列化过程中的内存占用，逐步增加节点数量定位触发异常的阈值，再针对性调整分批大小或序列化策略。

内容的提问来源于stack exchange，提问作者Joël Hecht