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

目录
  • 引言
  • 本文重点
  • 准备工作
  • 测试代码
    • 纯js测试代码
    • wasm（go）源码
    • js+wasm测试代码
  • 测试条件
  • 测试目标
    • chrome （版本：103.0.5060.114）
    • firefox （版本号：103.0.1 (64 位)）
  • 分段计算测试代码
    • 纯js
    • js+wasm
  • 测试结论
    • firefox
    • chrome
  • 最终结论

引言

在过去的几年里，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
  • 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
  • 900M 测试5次分别用时：
序号 纯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
  • 800M 测试5次分别用时：
序号 纯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
  • 600M 测试5次分别用时：
序号 纯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
  • 400M 测试5次分别用时：
序号 纯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
  • 200M 测试5次分别用时：
序号 纯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
  • 100M 测试5次分别用时：
序号 纯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
  • 50M 测试5次分别用时：
序号 纯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
  • 20M 测试5次分别用时：
序号 纯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
  • 5M 测试10次分别用时：
序号 纯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
  • 1M 测试5次分别用时：
序号 纯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
  • 1024M 测试10次分别用时：
序号 纯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
  • 900M 测试10次分别用时：
序号 纯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
  • 800M 测试10次分别用时：
序号 纯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
  • 600M 测试10次分别用时：
序号 纯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
  • 400M 测试10次分别用时：
序号 纯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
  • 200M 测试10次分别用时：
序号 纯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
  • 100M 测试10次分别用时：
序号 纯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
  • 50M 测试10次分别用时：
序号 纯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
  • 20M 测试10次分别用时：
序号 纯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
  • 5M 测试10次分别用时：
序号 纯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
  • 1M 测试10次分别用时：
序号 纯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的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 在JSP中如何实现MD5加密的方法

    在各种应用系统的开发中,经常需要存储用户信息,很多地方都要存储用户密码,而将用户密码直接存储在服务器上显然是不安全的,本文简要介绍在JSP中如何实现MD5加密的方法,希望能抛砖引玉. (一)消息摘要简介 一个消息摘要就是一个数据块的数字指纹.即对一个任意长度的一个数据块进行计算,产生一个唯一指印(对于SHA1是产生一个20字节的二进制数组).消息摘要是一种与消息认证码结合使用以确保消息完整性的技术.主要使用单向散列函数算法,可用于检验消息的完整性,和通过散列密码直接以文本形式保存等,目前广泛使用

  • node.JS md5加密中文与php结果不一致的解决方法

    因项目需要,需要Node.js与PHP做接口调用,发现node.js对中文使用md5加密与php对中文md5加密的结果不同. PHP <?php $str = '程序员'; echo $str.' md5:'.md5($str); ?> 输出: 程序员 md5:72d9adf4944f23e5efde37f6364c126f node.JS var crypto = require('crypto'); var md5 = function(str){ var crypto_md5 = cry

  • 详解易语言调用js实现md5加密方法

    详解易语言调用js实现md5加密方法

    易语言调用js需要用到拓展组件的脚本组件, 在窗口创建完毕的事件里给脚本组件初始化设置下脚本组件的语言属性,在这里以JScript为例: 脚本组件执行脚本的简单方法是:  脚本组件1.执行 ()  然后根据需要调用的脚本函数   脚本组件1.运行 () 首先看下脚本组件1.执行 () 的参数和返回值: 调用格式: 〈逻辑型〉 对象．执行 (文本型 脚本代码) - 脚本语言支持组件->脚本组件 英文名称:Execute 执行指定的代码文本.返回真为执行正常,返回假为出错,错误信息可以从"错误

  • node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)

    node.JS的加密模块crypto提供了 HTTP 或 HTTPS 连接过程中封装安全凭证的方法.也提供了 OpenSSL 的哈希,hmac, 加密(cipher), 解密(decipher), 签名(sign) 和 验证(verify) 方法的封装 crypto模块使用方法 crypto.setEngine(engine[, flags]) 为某些/所有 OpenSSL 函数加载并设置引擎(根据参数 flags 来设置). engine 可能是 id,或者是指向引擎共享库的路径. flags

  • 浅谈如何通过node.js对数据进行MD5加密

    md5介绍:MD5是一种常用的哈希算法,主要用于对一些重要数据进行"签名",当然这些数据可以是任意的.最终得到的"签名"通常都是一个16或32位的十六进制的字符串. 实际工作开发中,是不会有人直接将密码明文直接放到数据库当中的.因为这种做法是非常不安全的,一般都要对其进行MD5加密!比如某用户的密码是"123456"(当然这样的密码也没有安全性可言),经过MD5处理后即为: "e10adc3949ba59abbe56e057f20f88

  • TypeScript与JavaScript项目里引入MD5校验和

    TypeScript与JavaScript项目里引入MD5校验和

    目录 一.什么是MD5校验和? 二.MD5校验和的优点和漏洞 三.如何在TS项目里引入MD5校验和? 四.MD5校验的使用 五.另一个npm依赖包的使用方法 一.什么是MD5校验和? MD5,是Message Digest Algorithm 5的缩写,即消息摘要算法版本5. 消息摘要算法通过对所有数据提取指纹信息以实现数据签名.数据完整性校验等功能,由于其不可逆性,有时候会被用做敏感信息的加密.消息摘要算法也被称为哈希(Hash)算法或散列算法.任何消息经过散列函数处理后,都会获得唯一的散列值

  • 改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件

    前言 最近我们已经见识了WebAssembly如何快速编译.加速JS库以及生成更小的二进制格式.我们甚至为Rust和JavaScript社区以及其他Web编程语言之间的更好的互操作性制定了高级规划.正如前面一篇文章中提到的,我想深入了解一个特定组件的细节,wasm-bindgen. 今天WebAssembly标准只定义了四种类型:两种整数类型和两种浮点类型.然而,大多数情况下,JS和Rust开发人员正在使用更丰富的类型! 例如,JS开发人员经常与互以添加或修改HTML节点相关的文档交互,而Rus

  • JS如何调用WebAssembly编译出来的.wasm文件

    WebAssembly也叫浏览器字节码技术 这里就不过多的解释了网上很多介绍 主要是让大家知道在js里面如何调用执行它,我之前看WebAssemblyAPI时候反正是看得一脸懵逼 也是为了大家能更快的入手这个比较新的技术吧 这边写的一个dom是官方推荐的c/c++编译的 c代码 int add (int x, int y) { return x + y; } int square (int x) { return x * x; } 属性c但是对字节码不熟悉的朋友可能会不理解,为什么没有main函

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

    目录 引言 本文重点 准备工作 测试代码 纯js测试代码 wasm(go)源码 js+wasm测试代码 测试条件 测试目标 chrome (版本:103.0.5060.114) firefox (版本号:103.0.1 (64 位)) 分段计算测试代码 纯js js+wasm 测试结论 firefox chrome 最终结论 引言 在过去的几年里,wasm的话题那真是从早上聊到晚上,可以说处于异常兴奋的状态,但是几年过去了,它慢慢的被大多数人们忘记,原因比较简单——落地难 今天就wasm能给js

  • js前端上传文件缩略图技巧示例详解

    目录 引言 文件对象简介 Blob File FileReader FormData 文件对象之间的关系 缩略图的实现 总结 引言 通常情况下,前端提交给服务器的数据格式为JSON格式,但很多时候用户想上传自己的头像.视频等,这些非文本数据的时候,就不能直接以JSON格式上传到后端了. 当我们要获取用户上传的文件,可以使用input表单项,将type属性值设置为“file”. <form action=""> <input type="file"

  • JavaScript获取上传文件相关信息示例详解

    目录 前题场景 处理方式 图片文件 音频文件 判断处理 分析总结 前题场景 在开发过程中,文件上传是再熟悉不过的场景了,但是根据实际使用情况对上传文件的限制又各有不同.需要对本地上传文件进行相应的限制处理,防止不符合规则或者要求的文件上传到云存储中,从而造成云盘资源空间浪费. 与此同时,也在给客户端使用文件信息之前做了一次数据过滤处理,减少客户端对文件资源的处理和校验. 处理方式 因为客户端使用后台管理上传的图片文件和音频文件时,为了优化展示效果和加载的速度,所以在后台管理系统上传处希望依据图片

  • Xterm.js入门官方文档示例详解

    Xterm.js入门官方文档示例详解

    目录 前言 xterm.js是什么? 安装 初始化 使用插件 API文档模块 类 Terminal 构造函数 constructor 接口 插件 attach插件 前后端示例 结语 前言 入职的新公司所在的事业部专注于K12的编程教育.公司项目里有使用xterm.js这个库, 并基于master分支做出了一定的修改.为了尽快的熟悉业务以及公司的代码, 所以这里打算学习xterm.js的文档(粗略的翻译, 方便自己查阅, 凡是保留原文的地方, 是我目前还没有明白具体使用场景和用法的地方) xter

  • TypeScript前端上传文件到MinIO示例详解

    目录 什么是MinIO? 本地Docker部署测试服务器 上传的API TypeScript实现 1. XMLHttpRequest 2. Fetch API 3. Axios 从后端获取临时上传链接 上传文件 踩过的坑 1. presignedPutObject方式上传提交的方法必须得是PUT 2. 直接发送File即可 3. 使用Axios上传的时候,需要自己把Content-Type填写成为file.type 示例代码 什么是MinIO? MinIO 是一款高性能.分布式的对象存储系统.

  • Vue.js实现watch属性的示例详解

    Vue.js实现watch属性的示例详解

    目录 1.写在前面 2.watch的实现原理 3.立即执行的watch与回调执行时机 立即执行的回调函数 回调函数的执行时机 4.过期的副作用函数和cleanup 5.写在最后 1.写在前面 在上篇文章中,我们讨论了compted的实现原理,就是利用effect和options参数进行封装.同样的,watch也是基于此进行封装的,当然watch还可以传递第三参数去清理过期的副作用函数.不仅可以利用副作用函数的调度性,去实现回调函数的立即执行,也可以控制回调函数的执行时机. 2.watch的实现原

  • Shell脚本实现监测文件变化的示例详解

    Shell脚本实现监测文件变化的示例详解

    目录 代码 使用方法 我最近在使用Linux的过程中遇到,遇到这样一个需求:监测某个文件的创建,变动.删除,并记录文件的每一个版本.我在网上没有找到合适的脚本或工具,然后我就自己写了一个shell脚本实现这个需求. 代码 完整的shell脚本如下,可以直接使用.本示例中,脚本文件名为fileTracer.sh. #!/bin/bash # ------------------------------------------ # Filename : fileTracer.sh # Version

  • JS代码计算LocalStorage容量示例详解

    JS代码计算LocalStorage容量示例详解

    目录 LocalStorage 容量 计算总容量 已使用容量 剩余可用容量 LocalStorage 容量 localStorage的容量大家都知道是5M,但是却很少人知道怎么去验证,而且某些场景需要计算localStorage的剩余容量时,就需要我们掌握计算容量的技能了~~ 计算总容量 我们以10KB一个单位,也就是10240B,1024B就是10240个字节的大小,我们不断往localStorage中累加存入10KB,等到超出最大存储时,会报错,那个时候统计出所有累积的大小,就是总存储量了!

  • Python常见文件操作的示例详解

    Python常见文件操作的示例详解

    目录 从文件中读取数据 为什么要提供文件路径 逐行读取 创建一个包含文件各行内容的列表 使用文件中的内容 包含千位以上的大型文件 圆周率中包含你的生日吗 写入文件 附加到文件 从文件中读取数据 1:读取整个文件 首先创建一个文件,它包含一些文本信息,注意:如果该文件为.py文件,则再进行操作的时候可以不写路径,如果不是.py文件,则必须标明路径. 现在我们创建一个python文件,名为text.py,给他写入如下文本信息: 下面的程序打开并读取这个文件,再将其内容显示到屏幕上: with ope

  • php+js实现点赞功能的示例详解

    最近在做一个视频网站,需要实现视频的点赞功能,我是结合ajax和数据库实现的,数据库的格式为有四个字段:文章id,赞,踩,ip.因为需要一个ip只能点赞一次,所以需要一个ip字段存储点赞的ip,这样便于判断该ip是否已经点赞过了: 我将点赞和踩的图片做成两个按钮:具体代码如下: <button style="margin-left:4px" id="vote" rel="<?php echo 文章id;?>"> <i

随机推荐