一次让我记了半年的卡死事故

2023年7月，公司客服部门用我们后台导入一份 2.1万行 的Excel通讯录。点击上传后，整个页面直接白屏。客服组长在群里发了一段录屏：鼠标转圈转了 40秒 ，期间用户敲任意键都没反应，最后Chrome弹了「页面无响应，是否停止脚本」。

我打开DevTools Performance面板复现了一次，主线程被一个 2.4s 的Long Task完全堵死。用秒表掐了一下真实体验：从点击按钮到界面恢复响应，整整 17.5秒 。这期间页面连滚动条拖不动，更别说点「取消」按钮。

问题根源很清楚：2.1万行数据要做手机号去重、格式校验、身份证号加权因子计算、与线上黑名单做模糊匹配。这些都是同步逻辑丢在主线程上跑。JavaScript单线程，主线程一堵，什么都完了。

这篇文章就是我后来把整条计算链路全部改造到Web Worker的方案总结。包含2种备选方案的实测对比、完整的可运行代码、10万行数据的压测报告，以及5个我在生产环境踩过的坑。

为什么不用分片setTimeout或WASM？

先说结论，我测了3个方案，最终选了Web Worker。测的数据集是 10万行×8列 的模拟数据（含手机号、身份证号、姓名、地址），每行需要执行手机号正则校验、身份证验证码加权计算、地址关键词匹配3个操作。测试环境：Chrome 113，MacBook Pro M1 Pro 16G。

方案A：setTimeout分片 + 批处理

核心思路：把10万行数据切成每批100行，每批处理完setTimeout 0让出主线程，更新一次进度条。听起来能解决阻塞，实际上有个致命伤：分片只能保证主线程不长期占满，但总计算耗时没变，甚至更慢。

/**
 * 分片方案：每片100行，setTimeout(0)让出主线程
 * @param {Array} rows 原始数据
 * @param {Function} processRow 每行的处理函数
 * @param {Function} onProgress 进度回调
 */
function processInChunks(rows, processRow, onProgress) {
  const CHUNK_SIZE = 100;
  let index = 0;
  
  function nextChunk() {
    // 1. 记录本片的开始时间
    const chunkStart = performance.now();
    
    // 2. 处理当前切片
    for (let i = index; i < Math.min(index + CHUNK_SIZE, rows.length); i++) {
      processRow(rows[i], i);
    }
    
    // 3. 更新进度
    index += CHUNK_SIZE;
    const progress = Math.min(100, (index / rows.length) * 100);
    onProgress(progress);
    
    // 4. 如果没跑完，让出主线程继续下一片
    if (index < rows.length) {
      setTimeout(nextChunk, 0);
    } else {
      onProgress(100);
    }
  }
  
  nextChunk();
}

实测数据：10万行总耗时 21.3秒 。比一次性同步处理还慢 24% ，因为setTimeout回调有4ms最小嵌套延迟（Chrome对嵌套setTimeout有最小1ms/4ms钳制），2万次批次切换光调度开销就占了大头。最关键的是：主线程依然在持续工作，只是每片处理完给了浏览器一个喘息机会。

方案B：WASM（AssemblyScript）

当时我也考虑过WASM。写了个AssemblyScript版本，把手机号正则校验和身份证加权计算编译成WASM模块。计算的CPU密集部分确实快，但有两个绕不过去的问题。

// main.js 中调用WASM的代码示意
import { validate_phone } from './phone-validator.js';

// 每次调用都要进行一次JS↔WASM边界转换
for (let i = 0; i < rows.length; i++) {
  // 边界转换的开销：字符串编码 + 内存拷贝，单次约0.3-0.5ms
  // 10万次就多了 30-50秒 的开销
  const isValid = validate_phone(rows[i].phone);
}

实测结论：纯计算部分确实比JS快 2.8倍 ，但加上字符串转换的边界开销，总耗时 7.2秒 。比分片方案快，但达不到我想要的「低于3秒」。而且WASM的调试体验很差，报错信息是十六进制偏移量，定位问题全靠掰着指头数。

方案C：Web Worker

把完整计算逻辑丢进Worker线程，主线程只负责收消息、更新UI。数据通过结构化克隆或Transferable Objects传给Worker，计算完成后把结果传回。这个方案最终效果最好：10万行总耗时 2.8秒 ，其中包含数据准备0.6秒 + Worker计算2.2秒，全程页面流畅。

为什么Worker完胜？因为它直接把计算搬到独立线程，主线程完全解放。WASM虽快，但JS和WASM之间的数据交换开销在「处理大量字符串」场景下是硬伤；Worker的postMessage传输虽然也有开销，但可以配合Transferable Objects把ArrayBuffer零拷贝转移，规避这个问题。

三种方案耗时对比：

补充一句：WASM+Worker可以结合用，把WASM模块加载到Worker线程里跑，但那是另一套更复杂的架构，我们团队后来只在极端计算场景（比如大量SHA-256哈希运算）才这样搞。

完整代码实现

1. Worker线程核心代码

我建了一个独立的 phone-validator.worker.js 文件。所有计算逻辑都在这个文件里，不依赖任何外部库，减少传输和加载成本。这里处理的业务逻辑：检查手机号格式、检查是否在黑名单、计算身份证号校验码、最后返回清洗后的结果。

// phone-validator.worker.js
// 独立线程中的计算逻辑，不引用主线程任何变量

/* ---------- 工具函数 ---------- */

// 手机号正则：电信/联通/移动，宽松匹配
const PHONE_REG = /^1[3-9]\d{9}$/;

// 黑名单简表（真实项目中通常是几万条）
const BLACK_LIST = [
  '13800138000', '13900139000', '18800188000'
];

// 身份证号加权因子（前17位）
const ID_CARD_WEIGHTS = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
// 校验码表（加权和模11对应的校验码）
const CHECK_CODES = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];

/**
 * 校验手机号
 * @param {string} phone
 * @returns {boolean}
 */
function isValidPhone(phone) {
  return PHONE_REG.test(phone);
}

/**
 * 校验身份证号
 * @param {string} idCard 15位或18位身份证号
 * @returns {{ valid: boolean, gender: string, birthYear: number }|{ valid: boolean }}
 */
function isValidIdCard(idCard) {
  if (typeof idCard !== 'string') return { valid: false };
  
  // 15位身份证：升级规则是出生年份加19，补最后一位校验码
  if (idCard.length === 15) {
    if (!/^\d{15}$/.test(idCard)) return { valid: false };
    // 地址码6位 + 年份2位 + 月份2位 + 日期2位 + 顺序码3位
    const birthYear = 1900 + parseInt(idCard.slice(6, 8), 10);
    const birthMonth = parseInt(idCard.slice(8, 10), 10);
    const birthDate = parseInt(idCard.slice(10, 12), 10);
    // 粗略判断月份和日期范围
    if (birthMonth < 1 || birthMonth > 12) return { valid: false };
    if (birthDate < 1 || birthDate > 31) return { valid: false };
    return { valid: true, gender: parseInt(idCard[14], 10) % 2 ? '男' : '女', birthYear };
  }
  
  // 18位身份证
  if (idCard.length === 18) {
    // 前17位必须是数字，最后一位可以是X
    if (!/^\d{17}[\dXx]$/.test(idCard)) return { valid: false };
    
    let sum = 0;
    for (let i = 0; i < 17; i++) {
      sum += parseInt(idCard[i], 10) * ID_CARD_WEIGHTS[i];
    }
    const expectedCheckCode = CHECK_CODES[sum % 11];
    const actualCheckCode = idCard[17].toUpperCase();
    
    if (expectedCheckCode !== actualCheckCode) return { valid: false };
    
    const birthYear = parseInt(idCard.slice(6, 10), 10);
    return { valid: true, gender: parseInt(idCard[16], 10) % 2 ? '男' : '女', birthYear };
  }
  
  return { valid: false };
}

/**
 * 检查是否在黑名单中
 * @param {string} phone
 * @returns {boolean}
 */
function isInBlacklist(phone) {
  // 黑名单数组很小（3条），直接includes
  // 真实项目中是几万条HashSet，用Set.has()做O(1)查询
  return BLACK_LIST.includes(phone);
}

/**
 * 处理单行数据
 * @param {object} row 原始行
 * @param {number} rowIndex 行号
 * @returns {object} 处理后的行
 */
function processRow(row, rowIndex) {
  const { phone, idCard, name, address } = row;
  const result = {
    rowIndex,
    phone,
    idCard,
    name,
    address,
    isValid: true,
    errors: []
  };
  
  // 1. 校验手机号
  if (!isValidPhone(phone)) {
    result.isValid = false;
    result.errors.push('手机号格式错误');
  }
  
  // 2. 校验是否在黑名单
  if (isInBlacklist(phone)) {
    result.isValid = false;
    result.errors.push('手机号命中黑名单');
  }
  
  // 3. 校验身份证号
  const idCardResult = isValidIdCard(idCard);
  if (!idCardResult.valid) {
    result.isValid = false;
    result.errors.push('身份证号校验失败');
  } else {
    // 顺便提取性别和出生年份，方便前端展示
    result.gender = idCardResult.gender;
    result.birthYear = idCardResult.birthYear;
  }
  
  return result;
}

/* ---------- Worker消息处理 ---------- */

// 监听主线程发来的消息
self.onmessage = function(e) {
  const { type, payload } = e.data;
  
  switch (type) {
    case 'PROCESS_ROWS': {
      const { rows } = payload;
      const startTime = performance.now();
      const results = [];
      
      // 每处理500行返回一次进度
      const PROGRESS_INTERVAL = 500;
      
      for (let i = 0; i < rows.length; i++) {
        const result = processRow(rows[i], i);
        results.push(result);
        
        // 进度上报
        if ((i + 1) % PROGRESS_INTERVAL === 0 || i === rows.length - 1) {
          const progress = Math.min(100, Math.round(((i + 1) / rows.length) * 100));
          self.postMessage({
            type: 'PROCESS_PROGRESS',
            payload: { progress }
          });
        }
      }
      
      const totalTime = performance.now() - startTime;
      
      // 一次性返回所有结果
      self.postMessage({
        type: 'PROCESS_DONE',
        payload: {
          results,
          totalTime,
          totalCount: rows.length,
          validCount: results.filter(r => r.isValid).length,
          invalidCount: results.filter(r => !r.isValid).length
        }
      });
      break;
    }
    
    case 'CANCEL': {
      // 为了让取消生效，我们在处理循环中检查isCancelled标志。
      // 但因为for循环是同步的，如果要支持真正的取消，需要把大循环改成可中断的
      // 分片循环。这里为简洁起见，只做标记，实际可以在循环体里检查这个标志。
      self.isCancelled = true;
      break;
    }
    
    default:
      break;
  }
};

这里有个关键点：数据传输方式。如果直接用 postMessage({ rows })，主线程到Worker的数据是结构化克隆，10万行大概要序列化 800ms 。更好的做法是把数据转成ArrayBuffer再传输。

// ⚠️ 错误示范：直接传对象数组，10万行序列化耗时约800ms
worker.postMessage({ type: 'PROCESS_ROWS', payload: { rows: jsonArray } });

// ✅ 正确示范：用Transferable Objects
// 先把数据转成定长字符串的ArrayBuffer，传输时不复制内存
const buffer = new TextEncoder().encode(JSON.stringify(rows));
worker.postMessage({ type: 'PROCESS_ROWS', payload: { rowsBuffer: buffer } }, [buffer]);
// 第二个参数[buffer]告诉浏览器：这个buffer的所有权转移给Worker，零拷贝

2. 主线程调用代码

主线程的职责：初始化Worker、监听消息、更新UI、分发任务。我把这层逻辑封装成 ValidationService，供多个页面复用。

// validationService.js
/**
 * 校验服务 - 封装Worker生命周期
 * 负责创建Worker、消息路由、错误处理、销毁
 */
export class ValidationService {
  constructor() {
    this.worker = null;
    this.pendingResolve = null;
    this.pendingReject = null;
    this.onProgressCallback = null;
    this.workerURL = null;
  }
  
  /**
   * 初始化Worker
   * 用URL.createObjectURL创建Worker实例
   * @returns {Promise}
   */
  init() {
    return new Promise((resolve, reject) => {
      if (this.worker) {
        resolve();
        return;
      }
      
      try {
        // 注意：使用new URL('./phone-validator.worker.js', import.meta.url)
        // 而不是直接写相对路径，这样在webpack/Vite下都能正确解析
        this.workerURL = new URL('./phone-validator.worker.js', import.meta.url);
        this.worker = new Worker(this.workerURL, { type: 'module' });
        
        this.worker.onmessage = this.handleMessage.bind(this);
        this.worker.onerror = this.handleError.bind(this);
        
        // 等300ms让Worker线程启动完毕
        // 实际上onmessage注册完成后Worker就可用了
        resolve();
      } catch (err) {
        reject(err);
      }
    });
  }
  
  /**
   * 处理Worker返回的消息
   * @param {MessageEvent} e
   */
  handleMessage(e) {
    const { type, payload } = e.data;
    
    switch (type) {
      case 'PROCESS_PROGRESS':
        if (this.onProgressCallback) {
          this.onProgressCallback(payload.progress);
        }
        break;
        
      case 'PROCESS_DONE':
        if (this.pendingResolve) {
          this.pendingResolve(payload);
          this.pendingResolve = null;
          this.onProgressCallback = null;
        }
        break;
        
      default:
        console.warn('Unknown message type:', type);
    }
  }
  
  /**
   * 处理Worker错误
   * @param {ErrorEvent} e
   */
  handleError(e) {
    if (this.pendingReject) {
      this.pendingReject(new Error(`Worker错误: ${e.message}，文件: ${e.filename}:${e.lineno}`));
      this.pendingReject = null;
      this.pendingResolve = null;
      this.onProgressCallback = null;
    }
  }
  
  /**
   * 校验数据
   * @param {Array