Vue.js中Web Worker向主线程传输大数据的优化求助

你的问题核心在于两个层面：一是postMessage对大量嵌套对象的结构化克隆开销触发栈溢出，二是主线程渲染百万级DOM节点的性能瓶颈。以下是针对性的落地优化方案：

1. 优化数据传输：用二进制格式减少序列化开销 #

postMessage默认的结构化克隆对大量嵌套对象的序列化/反序列化开销极大，可将网格数据转换为**TypedArray（二进制数组）**传输，同时去掉可在主线程动态生成的属性（如code），压缩数据体积：

修改Web Worker代码 #

// gridWorker.js
self.onmessage = function (e) {
  const { isUpdateColor, row, col, cellSize } = e.data;

  if (isUpdateColor) {
    // 每个单元格存储i(4字节) + j(4字节)，总字节数为单元格数*8
    const totalCells = row * col;
    const buffer = new ArrayBuffer(totalCells * 8);
    const dataView = new DataView(buffer);
    
    for (let i = 0; i < row; i++) {
      for (let j = 0; j < col; j++) {
        const offset = (i * col + j) * 8;
        dataView.setUint32(offset, i, true); // 小端存储节省空间
        dataView.setUint32(offset + 4, j, true);
      }
    }

    // 用Transferable Objects转移buffer所有权，避免数据复制
    self.postMessage({ row, col, buffer }, [buffer]);
  }
};

主线程接收解析 #

// 主线程methods
prepareGrid(isUpdateColor, cleanPath = true) {
  this.gridWorker = new GridWorker();
  this.gridWorker.onmessage = (event) => {
    const { row, col, buffer } = event.data;
    // 存储原始二进制数据，不直接转成对象数组
    this.gridBuffer = buffer;
    this.gridRow = row;
    this.gridCol = col;
    this.$forceUpdate();
  };
  this.gridWorker.postMessage({ isUpdateColor, row: this.row, col: this.col, cellSize: this.cellSize });
}

2. 核心优化：虚拟网格渲染（只渲染视口内单元格） #

百万级DOM节点直接渲染必然崩溃，必须仅渲染当前视口可见的单元格，滚动时动态更新渲染范围：

主线程模板修改 #

<v-stage ref="stage" @scroll="handleScroll">
  <v-layer ref="pathFinderLayer">
    <div 
      v-if="showTravelDistancePage"
      :style="{ 
        width: `${gridCol * cellSize}px`, 
        height: `${gridRow * cellSize}px`,
        position: 'relative'
      }"
    >
      <!-- 仅渲染视口内的单元格 -->
      <template v-for="i in visibleRows" :key="`row-${i}`">
        <template v-for="j in visibleCols" :key="`cell-${i}-${j}`">
          <v-rect 
            :config="getCellConfig(i, j)"
            @click="gridClick({i, j, code: `spot_${i}_${j}`})"
            :style="{
              position: 'absolute',
              left: `${j * cellSize}px`,
              top: `${i * cellSize}px`,
              width: `${cellSize}px`,
              height: `${cellSize}px`
            }"
          />
        </template>
      </template>
    </div>
  </v-layer>
</v-stage>

主线程虚拟滚动逻辑 #

data() {
  return {
    gridBuffer: null,
    gridRow: 0,
    gridCol: 0,
    cellSize: 20,
    visibleStartRow: 0,
    visibleEndRow: 0,
    visibleStartCol: 0,
    visibleEndCol: 0,
    stageRect: null
  };
},
mounted() {
  this.stageRect = this.$refs.stage.getBoundingClientRect();
  this.calculateVisibleRange();
},
computed: {
  visibleRows() {
    const rows = [];
    for (let i = this.visibleStartRow; i <= this.visibleEndRow; i++) {
      if (i >= 0 && i < this.gridRow) rows.push(i);
    }
    return rows;
  },
  visibleCols() {
    const cols = [];
    for (let j = this.visibleStartCol; j <= this.visibleEndCol; j++) {
      if (j >= 0 && j < this.gridCol) cols.push(j);
    }
    return cols;
  }
},
methods: {
  calculateVisibleRange() {
    const { width, height } = this.stageRect;
    const scrollTop = this.$refs.stage.scrollTop;
    const scrollLeft = this.$refs.stage.scrollLeft;
    // 计算可见的起始/结束行、列
    this.visibleStartRow = Math.floor(scrollTop / this.cellSize);
    this.visibleEndRow = Math.ceil((scrollTop + height) / this.cellSize);
    this.visibleStartCol = Math.floor(scrollLeft / this.cellSize);
    this.visibleEndCol = Math.ceil((scrollLeft + width) / this.cellSize);
  },
  handleScroll() {
    this.calculateVisibleRange();
  },
  getCellConfig(i, j) {
    // 从二进制数据解析单元格配置
    const offset = (i * this.gridCol + j) * 8;
    const dataView = new DataView(this.gridBuffer);
    return {
      x: j * this.cellSize,
      y: i * this.cellSize,
      width: this.cellSize,
      height: this.cellSize
      // 可添加其他需要的配置项
    };
  }
}

3. 进阶优化：按需生成数据（Worker仅生成视口区域） #

如果网格数据量极大，可让Worker仅生成当前视口及缓冲区域的单元格数据，滚动时再请求新区域：

修改Worker支持区域生成 #

// gridWorker.js
self.onmessage = function (e) {
  const { isUpdateColor, startRow, endRow, startCol, endCol, cellSize } = e.data;

  if (isUpdateColor) {
    const totalCells = (endRow - startRow + 1) * (endCol - startCol + 1);
    const buffer = new ArrayBuffer(totalCells * 8);
    const dataView = new DataView(buffer);
    let index = 0;

    for (let i = startRow; i <= endRow; i++) {
      for (let j = startCol; j <= endCol; j++) {
        const offset = index * 8;
        dataView.setUint32(offset, i, true);
        dataView.setUint32(offset + 4, j, true);
        index++;
      }
    }

    self.postMessage({ 
      startRow, endRow, startCol, endCol, buffer 
    }, [buffer]);
  }
};

主线程滚动时请求新区域 #

// 主线程handleScroll方法修改
handleScroll() {
  this.calculateVisibleRange();
  // 添加缓冲区域，避免滚动时出现空白
  const bufferRow = 5;
  const bufferCol = 5;
  const requestStartRow = Math.max(0, this.visibleStartRow - bufferRow);
  const requestEndRow = Math.min(this.gridRow - 1, this.visibleEndRow + bufferRow);
  const requestStartCol = Math.max(0, this.visibleStartCol - bufferCol);
  const requestEndCol = Math.min(this.gridCol - 1, this.visibleEndCol + bufferCol);
  
  // 检查区域是否已加载，未加载则请求Worker
  if (!this.isRegionLoaded(requestStartRow, requestEndRow, requestStartCol, requestEndCol)) {
    this.gridWorker.postMessage({
      isUpdateColor: true,
      startRow: requestStartRow,
      endRow: requestEndRow,
      startCol: requestStartCol,
      endCol: requestEndCol,
      cellSize: this.cellSize
    });
  }
}

关键注意事项 #

• 移除冗余属性：如code可通过i、j在主线程动态生成，无需在Worker中传递。
• 优先使用Transferable Objects：转移ArrayBuffer时直接移交所有权，避免数据复制。
• 绝对禁止全量渲染DOM：虚拟渲染是解决百万节点崩溃的核心，浏览器无法承载大量DOM元素。

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