您现在的位置是：网站首页> 编程资料编程资料

wasm+js实现文件获取md5示例详解_JavaScript_

2023-05-24 400人已围观

简介 wasm+js实现文件获取md5示例详解_JavaScript_

引言

在过去的几年里，wasm的话题那真是从早上聊到晚上，可以说处于异常兴奋的状态，但是几年过去了，它慢慢的被大多数人们忘记，原因比较简单——落地难

今天就wasm能给js加多少分这个问题，做一个小型的讨论，今天的专注点是，前端js获取一个文件的md5值，也就是上传文件时所需要的秒传功能的核心

简单来说，文件上传秒传不仅仅是网盘公司的专属，平时我们上传文件给后端也是很常用的，前端通过对目标文件md5计算后与后端进行对比，如果已经上传过，则直接返回已有地址，这样，大大节省了服务器空间。基本思路如下：

前端input type="file"获取文件
通过md5工具库进行计算，得到md5值
请求接口，后端判断此md5是否已经在数据库里
如果在数据库里，则直接告诉前端，已存在（秒传）

本文重点

今天的重点是如何快速获取一个文件的md5值，这里就涉及到小文件，大文件的问题了。所以，我将以下面文件体积为例来测试js与wasm对文件md5计算的速度对比。

wasm我使用golang进行开发，因为golang打包成wasm会把运行时也加进去，所以，打包的结果2.2M，我们暂时忽略这个体积，因为如果能落地，那么换成rust，换成c++都不是难事，如果不能落地，那么，golang不行，c++也照样不行。

准备工作

通过ffmeg 从一个2G+的文件上截取不同体积的文件，用于测试。

ffmpeg -i /path/sourch.mp4 -fs 1M -c:v copy -c:a copy /path/1M.mp4 ffmpeg -i /path/sourch.mp4 -fs 5M -c:v copy -c:a copy /path/5M.mp4 ffmpeg -i /path/sourch.mp4 -fs 20M -c:v copy -c:a copy /path/20M.mp4 ffmpeg -i /path/sourch.mp4 -fs 50M -c:v copy -c:a copy /path/50M.mp4 ffmpeg -i /path/sourch.mp4 -fs 100M -c:v copy -c:a copy /path/100M.mp4 ffmpeg -i /path/sourch.mp4 -fs 200M -c:v copy -c:a copy /path/200M.mp4 ffmpeg -i /path/sourch.mp4 -fs 400M -c:v copy -c:a copy /path/400M.mp4 ffmpeg -i /path/sourch.mp4 -fs 600M -c:v copy -c:a copy /path/500M.mp4 ffmpeg -i /path/sourch.mp4 -fs 800M -c:v copy -c:a copy /path/800M.mp4 ffmpeg -i /path/sourch.mp4 -fs 900M -c:v copy -c:a copy /path/900M.mp4 ffmpeg -i /path/sourch.mp4 -fs 1024M -c:v copy -c:a copy /path/1024M.mp4 ffmpeg -i /path/sourch.mp4 -fs 1280M -c:v copy -c:a copy /path/1280M.mp4 ffmpeg -i /path/sourch.mp4 -fs 1536M -c:v copy -c:a copy /path/1536M.mp4 ffmpeg -i /path/sourch.mp4 -fs 1792M -c:v copy -c:a copy /path/1792M.mp4 ffmpeg -i /path/sourch.mp4 -fs 2048M -c:v copy -c:a copy /path/2048M.mp4

测试代码

纯js测试代码

文件md5

wasm（go）源码

请参考：

github.com/butoften/wa…

js+wasm测试代码

文件md5

测试条件

从FileReader开始读取算起到md5计算结束，因为现实中，我们需要做loading条动画比例
mac 2.7 GHz 双核Intel Core i5
mac 8 GB 1867 MHz DDR3

测试目标

chrome （版本：103.0.5060.114）

2048M 测试5次分别用时：
如果分段计算，每段使用512M

序号	纯js	纯js分段	js+wasm	js+wasm分段
1	37477 ms	25638 ms	31680 ms	22898 ms
2	32926 ms	28088 ms	32516 ms	25168 ms
3	33413 ms	31412 ms	33424 ms	20547 ms
4	35054 ms	35821 ms	33906 ms	23130 ms
5	35986 ms	36895 ms	29014 ms	22011 ms

1792M 测试5次分别用时：

序号	纯js	纯js分段	js+wasm	js+wasm分段
1	16298 ms	19441 ms	27322 ms	19233 ms
2	11593 ms	29424 ms	28955 ms	18602 ms
3	24589 ms	28685 ms	28192 ms	18472 ms
4	24725 ms	29892 ms	28931 ms	18260 ms
5	24695 ms	31453 ms	36166 ms	19474 ms

1536M 测试5次分别用时：

序号	纯js	纯js分段	js+wasm	js+wasm分段
1	19856 ms	19591 ms	21259 ms	15920 ms
2	15119 ms	26283 ms	20821 ms	15634 ms
3	21387 ms	25861 ms	22473 ms	16893 ms
4	19550 ms	25797 ms	21793 ms	17239 ms
5	20363 ms	26402 ms	20782 ms	15786 ms

1280M 测试5次分别用时：

序号	纯js	纯js分段	js+wasm	js+wasm分段
1	6449 ms	12169 ms	22856 ms	16621 ms
2	14695 ms	17558 ms	19147 ms	18014 ms
3	17792 ms	20326 ms	17203 ms	14683 ms
4	18094 ms	16452 ms	18396 ms	14399 ms
5	15830 ms	19006 ms	19241 ms	14119 ms

1024M 测试5次分别用时：

序号	纯js	纯js分段	js+wasm	js+wasm分段
1	5003 ms	9441 ms	16233 ms	9252 ms
2	6240 ms	14917 ms	11145 ms	9316 ms
3	8563 ms	10849 ms	12653 ms	10963 ms
4	10261 ms	12155 ms	11607 ms	9108 ms
5	8775 ms	11138 ms	9869 ms	10451 ms