Web Workers并行计算与前端性能优化实战

前端主线程阻塞的性能瓶颈

JavaScript在浏览器中默认运行在主线程上，与DOM渲染、用户交互、布局计算共享同一个线程。当执行复杂的计算任务（大数据排序、图像处理、加密运算、PDF解析）时，主线程被阻塞导致页面掉帧、交互无响应，用户体验直接崩塌。Web Workers通过将计算任务转移到独立线程执行，彻底解决这个问题。

Web Workers的适用场景判断标准：任何执行时间超过16ms（一帧的预算）的同步计算都应该考虑移入Worker。实际开发中，1000条以上数据的排序过滤、10MB以上文件的解析、实时音视频编解码等都是典型的Worker候选场景。

Web Workers基础用法与通信模式

Worker与主线程通过postMessage通信，数据传输采用结构化克隆算法（深拷贝）。大数据传输的拷贝开销可以通过Transferable Objects避免：

// main.js - 主线程
const worker = new Worker('data-processor.js');

// 发送大数据（使用Transferable避免拷贝）
const buffer = new ArrayBuffer(1024 * 1024 * 10); // 10MB
worker.postMessage({ type: 'process', data: buffer }, [buffer]);
// buffer在postMessage后变为0字节，所有权已转移

// 接收Worker结果
worker.onmessage = (event) => {
  const { type, result } = event.data;
  if (type === 'result') {
    renderChart(result);
  }
};

// data-processor.js - Worker线程
self.onmessage = (event) => {
  const { type, data } = event.data;
  if (type === 'process') {
    const result = heavyComputation(data);
    self.postMessage({ type: 'result', result });
  }
};

function heavyComputation(buffer) {
  const view = new Float64Array(buffer);
  // 执行密集计算...
  return processedData;
}

Transferable Objects支持ArrayBuffer、MessagePort、ImageBitmap、OffscreenCanvas等类型，传输零拷贝，性能提升可达数十倍。

SharedArrayBuffer实现真正的共享内存

postMessage的数据拷贝问题在超大数据场景下仍然存在。SharedArrayBuffer（SAB）允许多个线程共享同一块内存，无需数据传输：

// 主线程创建共享内存
const sharedBuffer = new SharedArrayBuffer(1024 * 1024 * 50); // 50MB
const sharedArray = new Float64Array(sharedBuffer);

for (let i = 0; i < sharedArray.length; i++) {
  sharedArray[i] = Math.random();
}

const worker = new Worker('parallel-sort.js');
worker.postMessage({ type: 'init', buffer: sharedBuffer });

// parallel-sort.js
let sharedArray;
self.onmessage = (event) => {
  if (event.data.type === 'init') {
    sharedArray = new Float64Array(event.data.buffer);
    parallelSort();
  }
};

function parallelSort() {
  // 使用Atomics保证线程安全
  const sorted = [...sharedArray].sort((a, b) => a - b);
  self.postMessage({ type: 'done' });
}

SAB的安全前提是页面必须配置COOP/COEP响应头：

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

这两个头部会导致跨域资源加载受限，需要配合CORP头对跨域资源标记为可共享。Nginx配置示例：

add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Embedder-Policy "require-corp" always;
add_header Cross-Origin-Resource-Policy "cross-origin" always;

实战：大数据表格的Worker并行渲染

10万行数据的前端表格是典型的性能瓶颈场景。将排序、过滤、虚拟滚动计算移入Worker，主线程只负责DOM渲染：

// table-worker.js
let allData = [];

self.onmessage = ({ data }) => {
  const { action, payload } = data;
  switch (action) {
    case 'load':
      allData = payload.rows;
      self.postMessage({ action: 'loaded', count: allData.length });
      break;
    case 'sort': {
      const { column, direction } = payload;
      allData.sort((a, b) => {
        const va = a[column], vb = b[column];
        return direction === 'asc' ? va - vb : vb - va;
      });
      const visible = allData.slice(payload.start, payload.end);
      self.postMessage({ action: 'sorted', rows: visible, total: allData.length });
      break;
    }
    case 'filter': {
      const { keyword, fields } = payload;
      const filtered = allData.filter(row => 
        fields.some(f => String(row[f]).includes(keyword))
      );
      const visible = filtered.slice(0, payload.pageSize);
      self.postMessage({ action: 'filtered', rows: visible, total: filtered.length });
      break;
    }
    case 'scroll': {
      const { start, end } = payload;
      const visible = allData.slice(start, end);
      self.postMessage({ action: 'viewport', rows: visible });
      break;
    }
  }
};

// 主线程调度
const tableWorker = new Worker('table-worker.js');
tableWorker.postMessage({ action: 'load', payload: { rows: massiveDataset } });

let scrollTimer;
container.addEventListener('scroll', () => {
  clearTimeout(scrollTimer);
  scrollTimer = setTimeout(() => {
    const start = Math.floor(container.scrollTop / ROW_HEIGHT);
    const end = start + VISIBLE_COUNT;
    tableWorker.postMessage({ action: 'scroll', payload: { start, end } });
  }, 16);
});

Worker池化与任务调度

创建过多Worker会消耗线程资源和内存。对于可并行的计算任务，采用Worker池化方案：

class WorkerPool {
  constructor(workerScript, poolSize = navigator.hardwareConcurrency || 4) {
    this.workers = Array.from({ length: poolSize }, () => 
      new Worker(workerScript)
    );
    this.taskQueue = [];
    this.workerBusy = new Array(poolSize).fill(false);
  }
  
  execute(data, transferList = []) {
    return new Promise((resolve, reject) => {
      const task = { data, transferList, resolve, reject };
      const idleIndex = this.workerBusy.indexOf(false);
      if (idleIndex !== -1) {
        this._dispatch(idleIndex, task);
      } else {
        this.taskQueue.push(task);
      }
    });
  }
  
  _dispatch(workerIndex, task) {
    this.workerBusy[workerIndex] = true;
    const worker = this.workers[workerIndex];
    const handler = (event) => {
      worker.removeEventListener('message', handler);
      this.workerBusy[workerIndex] = false;
      task.resolve(event.data);
      if (this.taskQueue.length > 0) {
        this._dispatch(workerIndex, this.taskQueue.shift());
      }
    };
    worker.addEventListener('message', handler);
    worker.postMessage(task.data, task.transferList);
  }
}

const pool = new WorkerPool('image-processor.js', 8);
const chunks = splitImage(imageData, 8);
const results = await Promise.all(
  chunks.map(chunk => pool.execute({ type: 'filter', data: chunk }))
);

这种池化方案将Worker数量控制在CPU核心数级别，避免线程过多导致的调度开销，同时最大化利用多核并行能力。