js实现低内存,超快速,较安全的计算超大文件摘要算法设计

未来大前端

共 1245字,需浏览 3分钟

 ·

2020-12-25 19:58

一、基础概念

  • Blob: 前端的一个专门用于支持文件操作的二进制对象

  • ArrayBuffer:前端的一个通用的二进制缓冲区,类似数组,但在API和特性上却有诸多不同

  • Buffer:Node.js提供的一个二进制缓冲区,常用来处理I/O操作

 

https://zhuanlan.zhihu.com/p/97768916

二、整体思路

  1. File,通过slice,切片成Blob块;

  2. FileReader,异步读取每片Blob,readAsArrayBuffer;

  3. 使用支持增量追加和ArrayBuffer的摘要算法库进行逐片计算追加摘要。

三、好处

 

全程arraybuffer,从二进制缓冲区读取,不读入到js数组和字符串 ,保证读取速度;

分片增量追加,分多次追加,而不是单词处理超级大内容,保证低内存消耗;

sha256,安全摘要算法,比MD5更安全;

 

四、代码示例

 

 

五、摘要算法库选型

 

 

名称arrayBuffer支持追加支持npm地址
spark-md5支持https://www.npmjs.com/package/spark-md5
crypto-js/sha256否,支持crypto定义的wordArray类型https://www.npmjs.com/package/crypto-js
sha.js否,支持buffer,对nodejs友好https://www.npmjs.com/package/sha.js
js-sha256https://www.npmjs.com/package/js-sha256
sha3-jshttps://www.npmjs.com/package/js-sha3

 

六、推荐

js-sha256+分片fileReader读arraBuffer组合。

 

 

参考

  1. html5 - javascript FileReader - parsing long file in chunks - Stack Overflow

  2. File | MDN

  3. Streams API | MDN

  4. WritableStream | MDN

  5. A Guide to Faster Web App I/O and Data Operations with Streams - Blog | SitePen

  6. ArrayBuffer - ECMAScript 6入门

  7. Streams Standard

  8. The Basics of Web Workers - HTML5 Rocks

  9. WEB WORKER配合FILE API,加速前端秒传读取MD5

  10. node如何实现大文件上传

  11. HTML5 File API 配合 Web Worker 计算大文件 SHA3 Hash 值 


浏览 50
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报