前端哈希计算策略
前端大文件哈希计算的两种策略:全量哈希与抽样哈希,以及 Web Worker 优化
#type / concept
#status / evergreen
#tech / dev / frontend
#platform / browser
[!info] related notes
前端哈希计算策略
一句话定义
前端哈希计算有两种策略:全量哈希准确但慢,抽样哈希快但不够绝对准确,实际中常折中使用。
核心内容
哈希的作用
- 唯一标识文件
- 支持秒传判断
- 支持断点续传匹配
- 支持完整性校验
方案 A:整文件哈希
优点:
- 准确
- 可直接判断文件是否相同
缺点:
- 大文件算得慢
- 浏览器 CPU 压力大
- 体验可能变差
方案 B:抽样哈希
比如只取:
- 文件头
- 文件尾
- 中间若干块
优点:
- 快很多
缺点:
- 不如全量绝对准确
实际折中方案
- 前端先算抽样 hash,用于快速去重/秒传判断
- 后端再做严格校验
Web Worker 优化
大文件全量 hash 会卡 UI,解决思路:
- 用 Web Worker 算 hash,避免阻塞主线程
- 分片增量计算
- 先抽样 hash,再服务端做严格校验
// Web Worker 中计算 hash
self.onmessage = async (e) => {
const { file, chunkSize } = e.data;
// 分片读取并增量计算 hash
// 定期 postMessage 进度
};
边界与易混淆点
- hash 算法选择:MD5 快但安全性弱,SHA-256 安全但慢,根据场景选择
- 抽样策略:需要足够分散才能代表整个文件,通常取头、尾、中间若干位置
- 并发计算:Web Worker 可以开多个并行计算不同片段的 hash