必须用 Web Worker，因为 JavaScript 主线程单线程，大文件哈希计算会阻塞 UI；需分片（2–8MB）+ 增量哈希（SparkMD5.ArrayBuffer.append）避免内存溢出，worker.js 中 importScripts 加载库并递归读片，主线程用 postMessage 传 File、onmessage 接收结果。
直接在主线程里算大文件的 MD5 或其他哈希值，页面会卡死几秒甚至十几秒——用户点不动按钮、进度条不动、体验极差。必须用 Web Worker 把计算挪到后台线程，UI 才能保持响应，同时准确拿到文件指纹用于秒传或校验。
为什么必须用 Web Worker
浏览器 JS 是单线程的，而哈希计算（如 MD5、SHA-1）是纯 CPU 密集型任务。对一个 1.67GB 文件：
- 主线程计算：占用主线程超 18 秒，UI 完全冻结
- Web Worker 计算：主线程照常响应，实测耗时仅 3 秒（并行优化后），且无任何卡顿
分片 + 增量哈希是关键
不能把整个大文件一次性读进内存（易爆内存、触发崩溃），必须边切片边计算：
- 推荐切片大小：2–8 MB（≤20MB 文件可用 1MB，≥200MB 可用 6–8MB）
- 用 File.prototype.slice() 分块，配合 FileReader.readAsArrayBuffer() 逐块读取
- 使用 SparkMD5.ArrayBuffer.append() + end() 的增量接口，避免重复构造对象、节省内存
Worker 文件怎么写
新建 worker.js，内容如下：
importScripts('/spark.js');
self.onmessage = function(e) {
const file = e.data; // File 对象可结构化克隆，安全传递
const spark = new SparkMD5.ArrayBuffer();
let offset = 0;
const chunkSize = 4 * 1024 * 1024; // 4MB 分片
function readChunk() {
if (offset >= file.size) {
self.postMessage({ md5: spark.end(), size: file.size });
self.close();
return;
}
const blob = file.slice(offset, offset + chunkSize);
const reader = new FileReader();
reader.onload = function(e) {
spark.append(e.target.result);
offset += chunkSize;
readChunk();
};
reader.readAsArrayBuffer(blob);
}
readChunk();
};
主线程怎么调用
创建 Worker 实例，传入文件，监听结果：
const worker = new Worker('./worker.js');
worker.postMessage(file); // File 可安全传递
worker.onmessage = function(e) {
console.log('文件 MD5:', e.data.md5);
console.log('文件大小:', e.data.size);
// 后续可发起秒传校验：/api/upload/check?fileMd5=xxx
};
worker.onerror = function(err) { console.error('Worker 错误:', err); };
