文件上传卡顿主因是预处理操作阻塞主线程，应将读取后转成ArrayBuffer并用transferable传入Web Worker处理，避开FileReader限制、CSV解析回调、哈希计算GC压力、Canvas不可用及Worker路径404等问题。
文件上传本身不卡主线程，真正卡的是上传前的预处理——比如读取大文件、解析 CSV/Excel、生成缩略图、计算哈希值、加密内容。这些操作一旦在主线程做，页面立刻冻结。Web Worker 能把它们挪出去，但必须绕开几个关键限制。
为什么 FileReader 不能放进 Worker
FileReader 是 DOM API，Worker 线程里根本不存在 FileReader、Blob 或 File 对象（虽然现代浏览器允许传 File 实例过去，但仅限于能被结构化克隆的部分，实际读取仍需主线程）。你如果在 Worker 里写 new FileReader()，会直接报 ReferenceError: FileReader is not defined。
- 主线程负责用
FileReader或File.arrayBuffer()把文件转成ArrayBuffer或Uint8Array - 再把这块二进制数据通过
postMessage(buffer, [buffer])用 transferable 方式传给 Worker——这才是零拷贝的关键 - Worker 里拿到的就是纯内存块，可直接用
new DataView(buffer)或new Uint8Array(buffer)处理
CSV 解析卡顿？别用 Papa Parse 默认模式
前端解析几 MB 的 CSV 卡顿，往往不是因为算法慢，而是 Papa Parse 默认边读边 parse + 触发大量回调，全挤在主线程里。把它拆到 Worker 后性能提升明显，但要注意配置：
- 主线程只调
file.arrayBuffer()，拿到ArrayBuffer后立刻worker.postMessage(buffer, [buffer]) - Worker 中用
papaparse.parse()的worker: false模式（注意：这是指 Papa Parse 内部不启新 Worker，我们自己已在外层开了，所以要关掉它自己的） - 禁用
header: true自动推断（它会多读一行），改用显式columns配置，减少字符串扫描 - 结果返回前，用
JSON.stringify()序列化，避免传大对象导致主线程反序列化卡顿
上传前计算文件哈希？用 Web Crypto + transferable
为断点续传或去重算 MD5/SHA-256，常见写法是循环分块 slice() + crypto.subtle.digest()，但如果在主线程做，每块都触发一次 Promise 回调，叠加 GC 压力，100MB 文件可能卡 2 秒以上。正确做法：
- 主线程分块读取：用
file.slice(start, end).arrayBuffer()分批获取 ArrayBuffer - 每块传给 Worker 时带上
start偏移和chunkId，Worker 用crypto.subtle.importKey()和digest()计算该块哈希 - 最终由 Worker 合并所有块哈希（如 SHA-256 的 HMAC 树），再传回结果——整个过程主线程只做 slice 和 postMessage，无计算压力
- 千万别在 Worker 里用
console.log打印每块哈希，它会同步阻塞消息通道
图片压缩/缩略图生成？Canvas 不行，用 WASM + Worker
想在前端压缩图片防上传超限？别在 Worker 里调 canvas.toBlob()——Canvas API 不可用。替代路径很明确：
- 主线程用
file.arrayBuffer()读取原始图片二进制 - Worker 中加载
libjpeg-turbo.wasm或mozjpeg.wasm（通过WebAssembly.instantiateStreaming()） - 用 WASM 函数直接解码 JPEG → 缩放 → 重新编码，全程不碰 DOM
- 压缩后二进制再传回主线程，由
URL.createObjectURL(new Blob([buffer]))创建预览链接 - 注意：WASM 模块只能加载一次，Worker 初始化时缓存
instance，避免重复编译
最易忽略的一点：Worker 脚本路径在 SPA 中极易 404。用 new Worker(new URL('./uploader-worker.js', import.meta.url)) 替代 new Worker('./uploader-worker.js')，否则构建后路径错乱，错误静默失败，你以为逻辑没跑，其实是 Worker 根本没起来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
