Web Worker 无法直接读取本地文件，但可通过主线程传递 File/Blob 的 ArrayBuffer 进行离线解析；需用 transferable 优化性能，Worker 中仅做同步计算，禁用 DOM、FileReader 等主线程专属 API。
Web Worker 本身不支持直接读取本地文件（比如用户通过 <input type="file"> 选择的文件），但它可以接收主线程传入的 File 或 Blob 数据（以 ArrayBuffer 形式为主），并在后台线程中解析，从而实现“多线程 + 离线”的文件处理。关键在于：主线程负责获取文件并转换为可传输的数据，Worker 负责纯计算型解析（如 CSV、JSONL、Excel 二进制结构、自定义二进制格式等），全程无需网络请求。
1. 主线程：读取文件并传给 Worker
使用 FileReader 或 File.arrayBuffer() 获取二进制数据，再通过 postMessage 传入 Worker。注意必须使用 transferable（如 ArrayBuffer）提升性能，避免拷贝开销：
// main.js
const worker = new Worker('parser-worker.js');
document.getElementById('file-input').addEventListener('change', async (e) => {
const file = e.target.files[0];
if (!file) return;
// ✅ 推荐：直接获取 ArrayBuffer（现代浏览器支持）
const buffer = await file.arrayBuffer();
// ⚠️ 注意：传入 ArrayBuffer 时用 transferables 提升性能
worker.postMessage({ type: 'PARSE', fileName: file.name, data: buffer }, [buffer]);
});
2. Worker 线程：纯同步解析，不操作 DOM
Worker 中不能访问 document、localStorage（但可读 indexedDB）、fetch（除非用 fetch() + Service Worker 配合，但此处强调离线）。解析逻辑必须是同步的、无副作用的，例如：
- 用
TextDecoder解码 UTF-8 字符串后按行切分 CSV - 用
Uint8Array+ 指针偏移解析自定义二进制头/帧 - 调用
papaparse的parse方法（传入字符串，非文件路径） - 用
xlsx（SheetJS）的XLSX.read(data, {type:'array'})解析 ArrayBuffer
// parser-worker.js
self.onmessage = function(e) {
const { type, fileName, data } = e.data;
if (type !== 'PARSE') return;
try {
let result;
if (fileName.endsWith('.csv')) {
const decoder = new TextDecoder('utf-8');
const text = decoder.decode(data);
result = parseCSV(text); // 自定义或 papaparse.parse(text, {header:true}).data
} else if (fileName.endsWith('.xlsx')) {
const workbook = XLSX.read(new Uint8Array(data), { type: 'array' });
const sheet = workbook.Sheets[workbook.SheetNames[0]];
result = XLSX.utils.sheet_to_json(sheet);
}
self.postMessage({ type: 'SUCCESS', fileName, result });
} catch (err) {
self.postMessage({ type: 'ERROR', fileName, message: err.message });
}
};
function parseCSV(text) {
return text.split('\n')
.filter(line => line.trim())
.map(line => line.split(',').map(cell => cell.trim().replace(/^"(.*)"$/, '$1')));
}
3. 安全与限制：哪些不能做？
Web Worker 是受限环境，需注意以下离线场景下的实际约束：
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
- ❌ 不能直接
new FileReader()或调用file.text()—— 这些 API 只在主线程可用 - ❌ 不能读取
file.path（浏览器禁止暴露真实路径） - ✅ 可以使用
IndexedDB存储解析结果供后续离线使用（需主线程开启 DB） - ✅ 可以用
Atomics+SharedArrayBuffer实现 Worker 间通信（需跨域隔离，现代 Chrome/Firefox 支持）
4. 进阶：大文件分块解析（防卡死）
对于几百 MB 的文件，一次性传整个 ArrayBuffer 可能触发内存压力或主线程阻塞。可改用分块读取 + 流式解析：
- 主线程用
file.slice(start, end)分段读取Blob，转成ArrayBuffer后逐段发给 Worker - Worker 维护状态（如 CSV 行号、二进制解析偏移），用
onmessage累积处理 - 配合
progress事件通知主线程进度（通过postMessage）
这样既保持离线能力，又避免单次运算过长导致页面无响应。
