真实场景：一个卡死浏览器的数据清洗任务

2024年3月，我在做一个金融风控前端项目。用户上传一个10万行CSV文件（约50MB），需要做字段校验、格式转换、异常值标记。最初用主线程直接处理，Chrome DevTools Performance面板显示：

• 主线程阻塞时间：4.2秒
• FPS掉到0（页面完全卡死）
• 用户点击任何按钮无响应

产品经理当场拍桌子：“这能用？” 我意识到必须上多线程。

方案对比：为什么选Web Worker

方案A：setTimeout分片执行

把10万行数据分成1000批，每批100行，用setTimeout(fn, 0)分批处理。实测数据：

• 总耗时：5.8秒（比直接跑还慢，因为事件循环调度开销）
• UI响应：每批之间能响应点击，但整体耗时翻倍
• 内存：峰值占用380MB（数据一直驻留）

方案B：requestIdleCallback

利用浏览器空闲时间处理，每帧最多处理5ms。实测：

• 总耗时：12.4秒（空闲时间碎片化严重）
• UI响应：流畅，但用户等太久
• 兼容性：iOS Safari不支持（项目需要兼容）

方案C：Web Worker

新建独立线程执行，主线程只负责收发消息。实测：

• 总耗时：1.9秒（4核CPU并行）
• UI响应：完全流畅（FPS稳定60）
• 内存：主线程占用降至45MB（数据在Worker中处理）

结论：大数据计算场景，Web Worker是唯一能同时保证性能和UI流畅的方案。

完整代码实现

1. 基础Worker：数据清洗

// worker.js - 版本1.0
self.onmessage = function(e) {
  const { data, config } = e.data;
  const startTime = performance.now();
  
  // 数据清洗逻辑
  const cleaned = data.map(row => {
    // 字段校验
    if (typeof row.id !== 'number' || row.id < 0) {
      row.error = 'ID格式错误';
    }
    // 格式转换：日期字符串转时间戳
    if (row.date) {
      const ts = new Date(row.date).getTime();
      row.timestamp = isNaN(ts) ? null : ts;
    }
    // 异常值标记：金额超过100万标记
    if (row.amount > 1000000) {
      row.flag = 'high_value';
    }
    return row;
  });
  
  const endTime = performance.now();
  self.postMessage({
    result: cleaned,
    stats: {
      totalRows: data.length,
      errorRows: cleaned.filter(r => r.error).length,
      highValueRows: cleaned.filter(r => r.flag === 'high_value').length,
      duration: endTime - startTime
    }
  });
};

2. 主线程调用代码

// main.js - 版本1.0
function processWithWorker(csvData) {
  return new Promise((resolve, reject) => {
    const worker = new Worker('worker.js');
    
    // 设置超时（防止Worker死循环）
    const timeout = setTimeout(() => {
      worker.terminate();
      reject(new Error('Worker处理超时'));
    }, 30000); // 30秒超时
    
    worker.onmessage = function(e) {
      clearTimeout(timeout);
      resolve(e.data);
      worker.terminate(); // 用完就销毁
    };
    
    worker.onerror = function(err) {
      clearTimeout(timeout);
      reject(err);
      worker.terminate();
    };
    
    // 发送数据（使用Transferable对象减少拷贝）
    const transferable = csvData instanceof ArrayBuffer ? [csvData] : [];
    worker.postMessage({ data: csvData, config: { maxAmount: 1000000 } }, transferable);
  });
}

// 使用示例
const rawData = parseCSV(fileContent); // 假设已有CSV解析函数
processWithWorker(rawData).then(({ result, stats }) => {
  console.log(`处理完成：${stats.totalRows}行，错误${stats.errorRows}行`);
  renderTable(result);
}).catch(err => {
  showError(err.message);
});

3. Worker线程池（生产级）

// workerPool.js - 版本2.0
class WorkerPool {
  constructor(workerScript, poolSize = navigator.hardwareConcurrency || 4) {
    this.workers = [];
    this.taskQueue = [];
    this.freeWorkers = [];
    
    // 初始化Worker池
    for (let i = 0; i < poolSize; i++) {
      const worker = new Worker(workerScript);
      worker._busy = false;
      worker._id = i;
      worker.onmessage = (e) => this._handleResult(worker, e);
      worker.onerror = (err) => this._handleError(worker, err);
      this.workers.push(worker);
      this.freeWorkers.push(worker);
    }
  }
  
  // 提交任务
  execute(data, transferable = []) {
    return new Promise((resolve, reject) => {
      const task = { data, transferable, resolve, reject };
      
      // 如果有空闲Worker，立即执行
      const freeWorker = this.freeWorkers.pop();
      if (freeWorker) {
        this._runTask(freeWorker, task);
      } else {
        // 否则排队
        this.taskQueue.push(task);
      }
    });
  }
  
  _runTask(worker, task) {
    worker._busy = true;
    worker._currentTask = task;
    worker.postMessage(task.data, task.transferable);
  }
  
  _handleResult(worker, e) {
    const task = worker._currentTask;
    worker._busy = false;
    worker._currentTask = null;
    task.resolve(e.data);
    
    // 处理队列中的下一个任务
    const nextTask = this.taskQueue.shift();
    if (nextTask) {
      this._runTask(worker, nextTask);
    } else {
      this.freeWorkers.push(worker);
    }
  }
  
  _handleError(worker, err) {
    const task = worker._currentTask;
    worker._busy = false;
    worker._currentTask = null;
    task.reject(err);
    
    // 重新创建Worker替代损坏的
    const newWorker = new Worker(workerScript);
    newWorker._busy = false;
    newWorker._id = worker._id;
    newWorker.onmessage = (e) => this._handleResult(newWorker, e);
    newWorker.onerror = (err) => this._handleError(newWorker, err);
    const idx = this.workers.indexOf(worker);
    this.workers[idx] = newWorker;
    this.freeWorkers.push(newWorker);
    worker.terminate();
  }
  
  // 销毁所有Worker
  destroy() {
    this.workers.forEach(w => w.terminate());
    this.workers = [];
    this.freeWorkers = [];
    this.taskQueue = [];
  }
}

// 使用线程池
const pool = new WorkerPool('worker.js', 4);
const results = await Promise.all([
  pool.execute(chunk1),
  pool.execute(chunk2),
  pool.execute(chunk3),
  pool.execute(chunk4)
]);

4. 使用SharedArrayBuffer共享内存

// sharedWorker.js - 版本3.0（需要COOP/COEP头）
// 主线程
const buffer = new SharedArrayBuffer(1024 * 1024 * 10); // 10MB共享内存
const view = new Float64Array(buffer);
const worker = new Worker('sharedWorker.js');

// 写入数据到共享内存
for (let i = 0; i < 100000; i++) {
  view[i] = Math.random() * 1000;
}

// 通知Worker处理
worker.postMessage({ buffer, offset: 0, length: 100000 });

// Worker内部
self.onmessage = function(e) {
  const { buffer, offset, length } = e.data;
  const view = new Float64Array(buffer);
  
  // 直接在共享内存上计算，无需拷贝
  for (let i = offset; i < offset + length; i++) {
    view[i] = Math.sqrt(view[i]); // 就地修改
  }
  
  self.postMessage({ done: true });
};

5. 性能测试脚本

// benchmark.js - 压测脚本
async function runBenchmark() {
  const testData = generateTestData(100000); // 10万行数据
  
  // 测试1：主线程直接处理
  console.time('mainThread');
  const result1 = processMainThread(testData);
  console.timeEnd('mainThread');
  
  // 测试2：单Worker
  console.time('singleWorker');
  const result2 = await processWithWorker(testData);
  console.timeEnd('singleWorker');
  
  // 测试3：4线程池
  const pool = new WorkerPool('worker.js', 4);
  const chunks = splitData(testData, 4);
  console.time('pool4');
  const result3 = await Promise.all(chunks.map(c => pool.execute(c)));
  console.timeEnd('pool4');
  
  // 测试4：8线程池（超线程）
  const pool8 = new WorkerPool('worker.js', 8);
  const chunks8 = splitData(testData, 8);
  console.time('pool8');
  const result4 = await Promise.all(chunks8.map(c => pool8.execute(c)));
  console.timeEnd('pool8');
  
  pool.destroy();
  pool8.destroy();
  
  return { result1, result2, result3, result4 };
}

function generateTestData(count) {
  const data = [];
  for (let i = 0; i < count; i++) {
    data.push({
      id: i,
      name: `user_${i}`,
      amount: Math.random() * 2000000,
      date: new Date(Date.now() - Math.random() * 365 * 24 * 3600 * 1000).toISOString()
    });
  }
  return data;
}

function splitData(data, parts) {
  const chunkSize = Math.ceil(data.length / parts);
  const chunks = [];
  for (let i = 0; i < parts; i++) {
    chunks.push(data.slice(i * chunkSize, (i + 1) * chunkSize));
  }
  return chunks;
}

效果数据

测试环境：MacBook Pro M1 Pro (10核CPU)、Chrome 122.0.6261.129、Node.js 20.11.0

关键发现：

• Worker方案比主线程快5-10倍
• 线程池比单Worker快2-3倍（数据分片+并行）
• 8线程比4线程只快25%（CPU核心数瓶颈，M1 Pro是6性能核+4能效核）
• 内存占用降低88%（主线程不用存全部数据）

避坑指南（我踩过的5个坑）

坑1：Worker内无法访问DOM

错误：在Worker里用document.createElement。正确做法：Worker只做纯计算，结果通过postMessage传回主线程渲染。

坑2：postMessage大数据拷贝性能

10万行JSON对象postMessage耗时约200ms（序列化+反序列化）。解决方案：使用Transferable对象（ArrayBuffer）或SharedArrayBuffer，数据零拷贝。实测Transferable传输10MB数据仅需2ms。

坑3：Worker文件路径问题

new Worker('worker.js')在打包后路径会变。我用Webpack5的new URL('./worker.js', import.meta.url)解决。Vite用?worker后缀。别写死相对路径。

坑4：SharedArrayBuffer需要安全头

Chrome 92+要求页面设置COOP和COEP头才能用SharedArrayBuffer。Nginx配置：

add_header Cross-Origin-Opener-Policy 'same-origin';
add_header Cross-Origin-Embedder-Policy 'require-corp';

没配置的话，SharedArrayBuffer会报错：'SharedArrayBuffer is not defined'。我在这卡了2小时。

坑5：Worker线程数不是越多越好

我试过开32个Worker，结果总耗时反而比8个慢。原因：线程上下文切换开销超过并行收益。最佳实践：Worker数 = navigator.hardwareConcurrency（逻辑核心数），最多不超过CPU核心数2倍。

总结

Web Worker不是银弹，但大数据计算场景它是唯一解。记住三点：用Transferable传数据、用线程池管理Worker、别超过CPU核心数。下次产品再让你处理50MB CSV，直接甩这套方案。