使用Web Worker优化JS解析Excel性能

在前端业务中，当用户导入包含数万行数据或多个工作表的 Excel 文件（.xlsx）时，直接在主线程调用解析库（如 SheetJS/xlsx 或 ExcelJS）通常会导致浏览器出现秒级甚至十余秒的彻底卡死：输入框无法响应、加载动画停滞、页面丢帧，极端情况下还会触发浏览器的“网页无响应”弹窗。要解决这一体验瓶颈，最彻底且标准的技术方案是使用 Web Worker 将密集型计算迁移至后台独立线程，配合 Transferable Objects 零拷贝特性与分块通信机制，让主线程在整个解析过程中始终保持 60fps 丝滑交互。

为什么 Excel 解析是前端的性能杀手

Excel 的 .xlsx 文件实质上是一个采用 ZIP 算法压缩的 XML 文件包。当我们使用 JavaScript 在前端直接读取一个 10MB 的 Excel 文件时，浏览器背后需要经历以下四个计算密集阶段：

1. 二进制解压：解开 ZIP 包并还原出 xl/worksheets/sheet1.xml、xl/sharedStrings.xml 等文本流。
2. XML 词法分析与 DOM 构建：将成千上万个 <c r="A1" t="s"> 标签转化为抽象语法树或内存对象。
3. 共享字符串与公式求值映射：遍历所有单元格，在庞大的共享字符串池中完成键值索引定位与格式化转换。
4. 巨型 JavaScript 数据结构实例化：生成包含几万至数十万项的数组及对象嵌套。

由于浏览器的 JavaScript 引擎与渲染引擎共享同一个主事件循环（Event Loop），上述耗时数秒的纯 CPU 密集运算会强行霸占整个线程。这期间，所有微任务、宏任务、UI 重排（Reflow）、重绘（Repaint）以及用户的任何点击、悬浮、滚动输入都被挂起排队，造成长达数秒的“页面假死”。

数据通信机制：杜绝二次卡顿的关键

很多开发者在引入 Web Worker 后发现，虽然把 XLSX.read 挪到了后台，但在主线程与 Worker 之间传递数据时页面依然会发生微小卡顿。这通常是因为通信机制设计不当。

默认情况下，worker.postMessage(data) 使用的是结构化克隆算法（Structured Clone Algorithm）。若直接把几十兆的 ArrayBuffer 或解析完成的几十万条复杂对象原样传递，浏览器会在内存中完整复制一份副本，执行深拷贝序列化与反序列化，这本身就会导致显著的 CPU 开销与内存突增。

完整实现步骤：从主线程到 Worker 封装

为了让方案可在生产环境平滑落地，我们按照标准模块化设计拆分为两个核心文件：负责后台处理的 excel.worker.js 以及主线程调用封装 excel-service.js。

步骤一：编写 Worker 处理脚本 (excel.worker.js)

Worker 脚本在独立上下文中执行，无法直接访问 window 或 document，因此需要通过 importScripts 或现代 ESM import 引入解析库。在此示例中，我们引入 SheetJS 的精简版，并按行分批吐出数据：

// excel.worker.js
// 引入 xlsx 库 (在项目中也可通过本地路径或 npm 打包器处理)
importScripts('https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js');

self.onmessage = function (e) {
  const { type, buffer, options = {} } = e.data;

  if (type === 'PARSE_EXCEL') {
    try {
      // 1. 发送开始解析进度
      self.postMessage({ type: 'PROGRESS', stage: 'READING', progress: 20 });

      // 2. 在 Worker 中调用 CPU 密集的解析核心
      const workbook = XLSX.read(buffer, {
        type: 'array',
        cellDates: options.cellDates ?? true, // 是否将日期格式化为 JS Date
        cellFormula: false,                  // 不需要公式则关闭以提升速度
        cellHTML: false,                     // 关闭 HTML 格式提取
        dense: true                          // dense 模式大幅降低行对象内存占用
      });

      self.postMessage({ type: 'PROGRESS', stage: 'SHEET_EXTRACT', progress: 60 });

      // 3. 提取第一个工作表
      const firstSheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[firstSheetName];

      // 4. 将工作表转换为 JSON 行数据
      const rawRows = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
      const totalRows = rawRows.length;

      // 5. 分块传输 (Chunking) 策略：每 3000 行派发一次，避免一次性反序列化巨量数据卡顿主线程
      const CHUNK_SIZE = 3000;
      let currentIndex = 0;

      while (currentIndex < totalRows) {
        const chunk = rawRows.slice(currentIndex, currentIndex + CHUNK_SIZE);
        currentIndex += CHUNK_SIZE;

        self.postMessage({
          type: 'CHUNK',
          rows: chunk,
          loaded: Math.min(currentIndex, totalRows),
          total: totalRows
        });
      }

      // 6. 发送完成标志
      self.postMessage({
        type: 'SUCCESS',
        sheetNames: workbook.SheetNames,
        totalRows
      });
    } catch (err) {
      // 捕获异常并反馈给主线程
      self.postMessage({
        type: 'ERROR',
        message: err.message || 'Excel 文件解析失败，可能格式损坏'
      });
    }
  }
};

步骤二：主线程服务封装 (excel-service.js)

主线程负责与 <input type="file"> 交互，借助 FileReader 读取二进制流，并在派发消息时通过 Transferable Objects 转让 ArrayBuffer 所有权：

// excel-service.js
export class ExcelWorkerService {
  constructor(workerUrl = './excel.worker.js') {
    this.workerUrl = workerUrl;
    this.worker = null;
  }

  /**
   * 解析 Excel 文件
   * @param {File} file 用户上传的文件对象
   * @param {Function} onProgress 进度回调 (0 - 100)
   * @param {Function} onChunk 分批数据接收回调
   * @returns {Promise<{ totalRows: number, sheetNames: string[] }>}
   */
  parse(file, onProgress, onChunk) {
    return new Promise((resolve, reject) => {
      // 1. 初始化 Worker
      this.terminate(); // 确保清理先前的 Worker 实例
      this.worker = new Worker(this.workerUrl);

      // 2. 监听 Worker 返回
      this.worker.onmessage = (event) => {
        const { type, stage, progress, rows, loaded, total, sheetNames, totalRows, message } = event.data;

        switch (type) {
          case 'PROGRESS':
            if (onProgress) onProgress(progress, stage);
            break;

          case 'CHUNK':
            if (onChunk) onChunk(rows);
            if (onProgress && total > 0) {
              // 60% - 100% 阶段分配给数据分批接收
              const batchPercent = 60 + Math.floor((loaded / total) * 40);
              onProgress(batchPercent, 'STREAMING');
            }
            break;

          case 'SUCCESS':
            this.terminate(); // 解析完成立即销毁，释放 Worker 内存
            resolve({ sheetNames, totalRows });
            break;

          case 'ERROR':
            this.terminate();
            reject(new Error(message));
            break;
        }
      };

      this.worker.onerror = (err) => {
        this.terminate();
        reject(new Error(`Worker 执行异常: ${err.message}`));
      };

      // 3. 读取本地文件为二进制 ArrayBuffer
      const reader = new FileReader();
      reader.onload = () => {
        const arrayBuffer = reader.result;

        // 4. 【关键优化】将 arrayBuffer 放入传输列表进行零拷贝转移
        this.worker.postMessage(
          {
            type: 'PARSE_EXCEL',
            buffer: arrayBuffer,
            options: { cellDates: true }
          },
          [arrayBuffer] // 第二个参数传入要转让所有权的 Transferable 数组
        );
      };

      reader.onerror = () => {
        this.terminate();
        reject(new Error('读取本地文件失败'));
      };

      reader.readAsArrayBuffer(file);
    });
  }

  /**
   * 中途取消或销毁
   */
  terminate() {
    if (this.worker) {
      this.worker.terminate();
      this.worker = null;
    }
  }
}

步骤三：业务组件中调用示例

在前端页面或框架组件中，调用逻辑非常精炼：

// main.js
const uploader = document.querySelector('#fileInput');
const progressBar = document.querySelector('#progressFill');
const parser = new ExcelWorkerService();

uploader.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const allRecords = [];

  try {
    const result = await parser.parse(
      file,
      (percent, stage) => {
        progressBar.style.width = `${percent}%`;
        console.log(`当前阶段: ${stage}, 进度: ${percent}%`);
      },
      (chunkRows) => {
        // 增量收到一批数据，可直接推入虚拟表格数据源
        allRecords.push(...chunkRows);
      }
    );

    console.log('解析全部完成:', result.totalRows, '行数据');
  } catch (error) {
    alert(`解析异常: ${error.message}`);
  }
});

极致调优：解析配置与内存控制细节

将解析移入 Worker 并采用零拷贝后，计算已不会卡死主线程。但如果文件包含 50 万行甚至更多数据，Worker 自身仍可能因为 V8 堆内存溢出（OOM）而崩溃。要达到生产级稳定性，还需要注意以下四项细节点：

• 开启 dense: true 模式：较新版本的 SheetJS 支持密集存储（Dense Sheet）模式。默认模式下每个单元格如 A1、B2 会作为对象的一级属性存储，产生大量散列哈希表开销；开启 dense: true 后，工作表采用二维数组 ws['!data'][row][col] 紧凑存储，对象头开销降低约 50% 以上。
• 按需裁剪解析字段：默认情况下解析器会计算格式化字符串（w）、提取富文本样式和公式（f）。若业务只需要原始值，将 cellFormula: false、cellHTML: false、cellText: false 关闭，解析耗时可直接削减 30% 到 50%。
• 及时调用 worker.terminate()：一次性大解析完毕后，应尽早调用 terminate 销毁 Worker 线程，通知宿主操作系统回收该线程占用的几十至上百兆堆内存。
• 主线程配合虚拟列表（Virtual Scroll）：Worker 虽然能在 1 秒内回传 5 万条记录，但如果主线程直接尝试创建 5 万个 <tr> DOM 节点，主线程依旧会发生布局（Layout）雪崩。因此，拿到数据后务必搭配虚拟滚动组件进行按屏绘制。

总结

前端解析 Excel 的性能问题本质上是“高耗时 CPU 密集型计算阻塞单线程 UI”的架构矛盾。通过 Web Worker 独立线程、Transferable Objects 零拷贝传输、计算参数裁剪（dense: true）与分批分块回传的组合拳，不仅能够彻底根治十万行级大文件的页面假死与卡顿问题，还能提供精确平滑的解析进度反馈与任务取消能力，从而为用户带来沉浸而可靠的导入体验。