目录
- 引言
- 本文重点
- 准备工作
- 测试代码
- 纯js测试代码
- wasm(go)源码
- js+wasm测试代码
- 测试条件
- 测试目标
- chrome (版本:103.0.5060.114)
- firefox (版本号:103.0.1 (64 位))
- 分段计算测试代码
- 测试结论
- 最终结论
引言
在过去的几年里,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测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件md5</title>
<script src="./SparkMD5.js"></script>
</head>
<body>
<input id="file" type="file" />
<script>
document.querySelector('#file').addEventListener('change', e => {
let startTime = Date.now()
const file = e.target.files[0];
const fileReader = new FileReader()
console.log('size', file.size / 1024 / 1024 / 1024, "G")
fileReader.onprogress = e => {
console.log(`${Math.floor((e.loaded / e.total) * 100)}%`)
}
let usedTime = 0
const md5 = new SparkMD5();
fileReader.readAsBinaryString(file);
fileReader.onload = e => {
md5.appendBinary(e.target.result);
const md5Str = md5.end()
usedTime += Date.now() - startTime
console.log('usedTime', usedTime, 'ms')
console.log('md5', md5Str)
}
});
</script>
</body>
</html>
wasm(go)源码
请参考:
github.com/butoften/wa…
js+wasm测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件md5</title>
<script src="./wasm_exec.js"></script>
</head>
<body>
<script>
function handleSayHello(message) {
console.lof('str from go', message)
}
const go = new Go();
WebAssembly.instantiateStreaming(fetch('wasm/md5.wasm'), go.importObject)
.then(res => {
go.run(res.instance);
});
</script>
<input id="file" type="file" />
<script>
document.querySelector('#file').addEventListener('change', e => {
let startTime = Date.now()
const file = e.target.files[0];
const fileReader = new FileReader()
console.log('size', file.size / 1024 / 1024 / 1024, "G")
fileReader.onprogress = e => {
console.log(`${Math.floor((e.loaded / e.total) * 100)}%`)
}
let usedTime = 0
fileReader.readAsArrayBuffer(file);
fileReader.onload = e => {
const bytes = new Uint8Array(e.target.result)
wasmMd5Add(bytes)
const md5Hash = wasmMd5End()
usedTime += Date.now() - startTime
console.log('usedTime', usedTime, 'ms')
console.log('md5', md5Hash)
}
});
</script>
</body>
</html>
测试条件
- 从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 |
序号 | 纯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 |
序号 | 纯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 |
序号 | 纯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 |
序号 | 纯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 |
序号 | 纯js | 纯js分段 | js+wasm | js+wasm分段 |
---|
1 | 4632 ms | 7721 ms | 9590 ms | 7887 ms |
2 | 5858 ms | 3312 ms | 7161 ms | 7963 ms |
3 | 2859 ms | 10808 ms | 7646 ms | 7973 ms |
4 | 3531 ms | 8614 ms | 7904 ms | 8197 ms |
5 | 5744 ms | 7612 ms | 7131 ms | 10714 ms |
序号 | 纯js | 纯js分段 | js+wasm | js+wasm分段 |
---|
1 | 3329 ms | 5884 ms | 9318 ms | 7270 ms |
2 | 7222 ms | 9917 ms | 6897 ms | 7096 ms |
3 | 2602 ms | 6066 ms | 6295 ms | 6908 ms |
4 | 2757 ms | 6662 ms | 6551 ms | 8164 ms |
5 | 2509 ms | 8730 ms | 7126 ms | 7039 ms |
序号 | 纯js | 纯js分段 | js+wasm | js+wasm分段 |
---|
1 | 2721 ms | 2824 ms | 6557 ms | 5019 ms |
2 | 3241 ms | 6867 ms | 4943 ms | 5026 ms |
3 | 1803 ms | 3012 ms | 4902 ms | 5052 ms |
4 | 1930 ms | 3010 ms | 5007 ms | 5022 ms |
5 | 1807 ms | 2885 ms | 4881 ms | 5238 ms |
序号 | 纯js | js+wasm |
---|
1 | 6406 ms | 3358 ms |
2 | 6435 ms | 3599 ms |
3 | 6450 ms | 3283 ms |
4 | 6286 ms | 3952 ms |
5 | 6408 ms | 3207 ms |
序号 | 纯js | js+wasm |
---|
1 | 3497 ms | 1705 ms |
2 | 3412 ms | 1643 ms |
3 | 3263 ms | 1825 ms |
4 | 3284 ms | 1710 ms |
5 | 3376 ms | 1768 ms |
序号 | 纯js | js+wasm |
---|
1 | 1873 ms | 923 ms |
2 | 1776 ms | 928 ms |
3 | 1772 ms | 913 ms |
4 | 1682 ms | 923 ms |
5 | 1742 ms | 898 ms |
序号 | 纯js | js+wasm |
---|
1 | 1043 ms | 516 ms |
2 | 877 ms | 479 ms |
3 | 907 ms | 504 ms |
4 | 872 ms | 459 ms |
5 | 865 ms | 495 ms |
序号 | 纯js | js+wasm |
---|
1 | 487 ms | 209 ms |
2 | 387 ms | 209 ms |
3 | 410 ms | 225 ms |
4 | 512 ms | 268 ms |
5 | 399 ms | 225 ms |
序号 | 纯js | js+wasm |
---|
1 | 147 ms | 92 ms |
2 | 133 ms | 90 ms |
3 | 177 ms | 94 ms |
4 | 157 ms | 42 ms |
5 | 175 ms | 84 ms |
序号 | 纯js | js+wasm |
---|
1 | 71 ms | 20 ms |
2 | 66 ms | 24 ms |
3 | 45 ms | 33 ms |
4 | 80 ms | 30 ms |
5 | 97 ms | 29 ms |
firefox (版本号:103.0.1 (64 位))
- 2048M 加载到52%时页面崩溃
- 采用Blob.slice方式分段计算
- 每512M为一段,测试5次
序号 | 纯js分段 | js+wasm分段 |
---|
1 | 51398 ms | 17338 ms |
2 | 41282 ms | 16385 ms |
3 | 42358 ms | 16966 ms |
4 | 43363 ms | 15843 ms |
5 | 40802 ms | 16551 ms |
- 1792M 加载到59%时页面崩溃
- 采用Blob.slice方式分段计算
- 每512M为一段,测试5次
序号 | 纯js分段 | js+wasm分段 |
---|
1 | 33690 ms | 13251 ms |
2 | 37423 ms | 13636 ms |
3 | 42903 ms | 13487 ms |
4 | 32684 ms | 13662 ms |
5 | 36691 ms | 14984 ms |
- 1536M 加载到69%时页面崩溃
- 采用Blob.slice方式分段计算
- 每512M为一段,测试5次
序号 | 纯js分段 | js+wasm分段 |
---|
1 | 28051 ms | 11425 ms |
2 | 27822 ms | 11337 ms |
3 | 28331 ms | 12508 ms |
4 | 30089 ms | 11520 ms |
5 | 32890 ms | 11507 ms |
- 1280M 加载到83%时页面崩溃
- 采用Blob.slice方式分段
- 计算512M为一段
序号 | 纯js分段 | js+wasm分段 |
---|
1 | 25680 ms | 9571 ms |
2 | 23956 ms | 9549 ms |
3 | 28829 ms | 10070 ms |
4 | 23518 ms | 9449 ms |
5 | 23200 ms | 9540 ms |
序号 | 纯js | js+wasm |
---|
1 | 38277 ms | 7776 ms |
2 | 40936 ms | 11254 ms |
3 | 29861 ms | 7653 ms |
4 | 25630 ms | 7517 ms |
5 | 18934 ms | 11443 ms |
6 | 24849 ms | 8039 ms |
7 | 18214 ms | 7727 ms |
8 | 18617 ms | 12987 ms |
9 | 33281 ms | 7523 ms |
10 | 40757 ms | 8895 ms |
序号 | 纯js | js+wasm |
---|
1 | 22752 ms | 8605 ms |
2 | 16669 ms | 9313 ms |
3 | 15716 ms | 6678 ms |
4 | 16940 ms | 6521 ms |
5 | 16732 ms | 9269 ms |
6 | 15805 ms | 6582 ms |
7 | 15718 ms | 6519 ms |
8 | 15795 ms | 9377 ms |
9 | 15641 ms | 6773 ms |
10 | 15622 ms | 7489 ms |
序号 | 纯js | js+wasm |
---|
1 | 15181 ms | 8333 ms |
2 | 14031 ms | 5880 ms |
3 | 14214 ms | 5987 ms |
4 | 33812 ms | 5935 ms |
5 | 14167 ms | 8666 ms |
6 | 14666 ms | 8031 ms |
7 | 28640 ms | 5991 ms |
8 | 13992 ms | 5840 ms |
9 | 13926 ms | 6032 ms |
10 | 14216 ms | 6637 ms |
序号 | 纯js | js+wasm |
---|
1 | 11418 ms | 4457 ms |
2 | 11199 ms | 5370 ms |
3 | 10717 ms | 4654 ms |
4 | 10607 ms | 4436 ms |
5 | 10611 ms | 4479 ms |
6 | 10718 ms | 4368 ms |
7 | 10560 ms | 5494 ms |
8 | 11519 ms | 5044 ms |
9 | 10802 ms | 4426 ms |
10 | 11779 ms | 4971 ms |
序号 | 纯js | js+wasm |
---|
1 | 8362 ms | 2981 ms |
2 | 7516 ms | 2999 ms |
3 | 7335 ms | 3030 ms |
4 | 7357 ms | 3150 ms |
5 | 7444 ms | 3001 ms |
6 | 8456 ms | 3223 ms |
7 | 7376 ms | 3120 ms |
8 | 7313 ms | 3072 ms |
9 | 7349 ms | 3240 ms |
10 | 7447 ms | 3352 ms |
序号 | 纯js | js+wasm |
---|
1 | 4066 ms | 1525 ms |
2 | 4440 ms | 1516 ms |
3 | 4223 ms | 1510 ms |
4 | 3916 ms | 1610 ms |
5 | 3917 ms | 1509 ms |
6 | 4028 ms | 1588 ms |
7 | 3964 ms | 1514 ms |
8 | 4037 ms | 1507 ms |
9 | 3957 ms | 1506 ms |
10 | 3987 ms | 1642 ms |
序号 | 纯js | js+wasm |
---|
1 | 2280 ms | 761 ms |
2 | 2331 ms | 820 ms |
3 | 2193 ms | 798 ms |
4 | 2242 ms | 777 ms |
5 | 2197 ms | 752 ms |
6 | 2330 ms | 769 ms |
7 | 2236 ms | 758 ms |
8 | 2364 ms | 798 ms |
9 | 2278 ms | 783 ms |
10 | 2384 ms | 785 ms |
序号 | 纯js | js+wasm |
---|
1 | 1366 ms | 397 ms |
2 | 1355 ms | 378 ms |
3 | 1445 ms | 460 ms |
4 | 1468 ms | 437 ms |
5 | 1417 ms | 406 ms |
6 | 1525 ms | 478 ms |
7 | 1381 ms | 393 ms |
8 | 1450 ms | 430 ms |
9 | 1417 ms | 428 ms |
10 | 1378 ms | 431 ms |
序号 | 纯js | js+wasm |
---|
1 | 921 ms | 168 ms |
2 | 871 ms | 162 ms |
3 | 859 ms | 163 ms |
4 | 864 ms | 162 ms |
5 | 1025 ms | 177 ms |
6 | 910 ms | 158 ms |
7 | 904 ms | 150 ms |
8 | 931 ms | 187 ms |
9 | 1014 ms | 182 ms |
10 | 871 ms | 159 ms |
序号 | 纯js | js+wasm |
---|
1 | 127 ms | 48 ms |
2 | 124 ms | 50 ms |
3 | 140 ms | 44 ms |
4 | 129 ms | 47 ms |
5 | 127 ms | 51 ms |
6 | 129 ms | 50 ms |
7 | 126 ms | 46 ms |
8 | 119 ms | 54 ms |
9 | 121 ms | 46 ms |
10 | 118 ms | 50 ms |
序号 | 纯js | js+wasm |
---|
1 | 46 ms | 18 ms |
2 | 41 ms | 22 ms |
3 | 43 ms | 13 ms |
4 | 40 ms | 15 ms |
5 | 44 ms | 11 ms |
6 | 47 ms | 15 ms |
7 | 42 ms | 11 ms |
8 | 42 ms | 20 ms |
9 | 45 ms | 13 ms |
10 | 44 ms | 16 ms |
分段计算测试代码
纯js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件md5</title>
<script src="./SparkMD5.js"></script>
</head>
<body>
<input id="file" type="file" />
<script>
document.querySelector('#file').addEventListener('change', e => {
let startTime = Date.now()
const file = e.target.files[0];
const fileReader = new FileReader()
console.log('size', file.size / 1024 / 1024 / 1024, "G")
fileReader.onprogress = e => {
console.log(`${Math.floor((e.loaded / e.total) * 100)}%`)
}
let usedTime = 0
const md5 = new SparkMD5();
let index = 0
const chunkSize = 512 * 1024 * 1024;//file.size / count
let count = Math.ceil(file.size / chunkSize)
console.log('分几份', count)
loadSliceFile();
function loadSliceFile() {
const sliceFile = file.slice(index * chunkSize, index * chunkSize + chunkSize)
fileReader.readAsBinaryString(sliceFile);
}
fileReader.onload = e => {
index += 1;
md5.appendBinary(e.target.result);
if (index < count) {
loadSliceFile()
}
else {
const md5Str = md5.end()
usedTime += Date.now() - startTime
console.log('usedTime', usedTime, 'ms')
console.log('md5', md5Str)
}
}
});
</script>
</body>
</html>
js+wasm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件md5</title>
<script src="./wasm_exec.js"></script>
<!-- <script src="./wasm_exec_tiny.js"></script> -->
</head>
<body>
<script>
function handleSayHello(message) {
console.lof('str from go', message)
}
const go = new Go();
WebAssembly.instantiateStreaming(fetch('wasm/md5.wasm'), go.importObject)
.then(res => {
go.run(res.instance); // 执行 golang里 main 方法
});
</script>
<input id="file" type="file" />
<script>
document.querySelector('#file').addEventListener('change', e => {
let startTime = Date.now()
const file = e.target.files[0];
const fileReader = new FileReader()
console.log('size', file.size / 1024 / 1024 / 1024, "G")
fileReader.onprogress = e => {
console.log(`${Math.floor((e.loaded / e.total) * 100)}%`)
}
let usedTime = 0
let index = 0
const sliceSize = 512
const chunkSize = sliceSize * 1024 * 1024;//file.size / count
let count = Math.ceil(file.size / chunkSize)
console.log('分几份', count)
loadSliceFile();
function loadSliceFile() {
const sliceFile = file.slice(index * chunkSize, index * chunkSize + chunkSize)
fileReader.readAsArrayBuffer(sliceFile);
}
fileReader.onload = e => {
index += 1;
const bytes = new Uint8Array(e.target.result)
wasmMd5Add(bytes)
if (index < count) {
loadSliceFile()
}
else {
const md5Hash = wasmMd5End()
usedTime += Date.now() - startTime
console.log('usedTime', usedTime, 'ms')
console.log('md5', md5Hash)
}
}
});
</script>
</body>
</html>
测试结论
firefox
- 超过1G的文件,直接崩溃,只能通过分段计算最终合并计算
- 从1M到2G,wasm的速度是纯js计算的2-3倍
- 20M,wasm是纯js的 6倍
chrome
- 0-400M时,wasm是纯js的2-3倍
- 600M-1024M时,纯js不分段比wasm要快
- 分段js比不分段wasm快一点点
- 分段js比分段wasm慢一点点
- 1280M,差不太多
- 大于1280M,js比wasm分段慢
- 对于js,分段要慢一些
- 对于wasm,分段要快一些
最终结论
- chrome对js的优化,使得在600M-1024M期间的大文件纯js计算md5速度要快于wasm,其他范围还是wasm性能好一些
- 由于firefox超过1G就崩溃了,所以我们平时写代码时,还是要做分段加载的。
- 业务中,还是可以使用wasm来提升性能的
- 可以针对 chrome与其他浏览器来制作不同的方案
- 其实golang 计算md5基本上是js的7-9倍,但js给wasm复制数据的时间占用了太多,导致wasm被降低了速度,文件越大,复制时间越长,越慢
wasm 还是可以使用的,众观全局,速度提升2-3倍。chrome可以针对性处理
以上就是wasm+js实现文件获取md5示例详解的详细内容,更多关于wasm js获取md5的资料请关注编程网其它相关文章!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341