必须用Web Worker解析大批量Excel文件，因其涉及解压ZIP、解析XML等CPU密集操作，主线程执行会阻塞UI；Worker提供独立线程，配合ArrayBuffer转移、分块处理与错误上报，可避免卡顿崩溃。
在HTML5中，无法直接通过主线程高效处理大批量Excel文件解析（如几万行以上），否则会导致页面卡顿甚至崩溃。解决方案是使用 Web Worker 在后台线程中完成解析与转换，主线程仅负责上传、触发和展示结果。
为什么必须用Web Worker？
Excel解析（尤其是.xlsx）涉及大量计算：解压ZIP、解析XML、类型推断、公式计算、日期转换等。这些操作在主线程执行会阻塞UI，用户无法点击、滚动或响应任何事件。Web Worker提供独立的JavaScript执行环境，不共享主线程DOM和变量，天然适合CPU密集型任务。
核心流程：从上传到解析完成
-
前端上传文件：使用
<input type="file">获取File对象，调用file.arrayBuffer()读取为二进制数据（避免base64编码带来的内存膨胀） -
传递数据给Worker：用
worker.postMessage(arrayBuffer, [arrayBuffer])转移所有权（Transferable），避免拷贝开销 -
Worker内解析Excel：推荐使用轻量、纯JS、无DOM依赖的库，如 SheetJS (xlsx.js) 的
read+utils.sheet_to_json，注意只启用所需功能（禁用图表、宏、样式等）以提速 -
分块处理大表（可选）：若单表超10万行，可在Worker中按行分片（如每5000行一组），逐批
postMessage回主线程渲染，实现“流式加载”感
关键细节与避坑点
-
Worker不能直接读文件路径：必须由主线程读取
ArrayBuffer后传入，Worker内不可调用fetch读取本地file://路径 -
避免JSON序列化大数据：解析后的数组若含数万对象，直接
postMessage(result)会触发结构化克隆，极慢。建议提前转为ArrayBuffer或压缩字段（如用Float32Array存数值列） -
错误需主动捕获并上报：Worker内
try/catch捕获解析异常（如加密表格、损坏文件），再通过postMessage({ error: 'xxx' })通知主线程提示用户 -
内存监控（进阶）：Worker中可用
performance.memory（若支持）或估算行数×列数×平均字节粗略判断是否接近上限，必要时中断并提示“文件过大，请拆分”
简单示例：Worker初始化与通信
主线程片段：
const worker = new Worker('excel-parser.worker.js');
const fileInput = document.querySelector('#excel-file');
fileInput.addEventListener('change', async (e) => {
const file = e.target.files[0];
const arrayBuffer = await file.arrayBuffer();
worker.postMessage(arrayBuffer, [arrayBuffer]); // 转移所有权
});
worker.onmessage = ({ data }) => {
if (data.error) alert('解析失败：' + data.error);
else console.log('得到', data.rows.length, '行数据');
};
excel-parser.worker.js 片段：
importScripts('https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js');
self.onmessage = async function(e) {
try {
const data = new Uint8Array(e.data);
const workbook = XLSX.read(data, { type: 'array' });
const sheet = workbook.Sheets[workbook.SheetNames[0]];
const rows = XLSX.utils.sheet_to_json(sheet, { defval: null });
self.postMessage({ rows });
} catch (err) {
self.postMessage({ error: err.message });
}
};
不复杂但容易忽略：务必测试不同Excel版本（.xls/.xlsx/.csv）、空单元格、混合类型列、长文本和特殊字符，确保Worker内解析逻辑健壮。真正的大批量场景（如100MB+文件），还需结合流式解析（SheetJS的stream模式）或服务端协同处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
