简单学习WebAssembly和JavaScript在谷歌V8引擎中的运行过程（三）

最新推荐文章于 2023-11-06 09:24:41 发布

龙龙写代码

最新推荐文章于 2023-11-06 09:24:41 发布

阅读量552

点赞数

文章标签： javascript 学习开发语言

本文链接：https://blog.csdn.net/qq_42275400/article/details/125418510

版权

WASM和JS的运行分析（三）

文章目录

WASM和JS的运行分析（三）
前言
一、代码实现
- 1.裴波那契数列
- 2.矩阵乘法
二、结果分析
- 1.裴波那契数列
- 2.矩阵乘法
总结

前言

在前面我已经阐述过WebAssembly的性能优越性，它能够以接近本地原生C代码的运行速度，运行在浏览器平台中，下面我通过求裴波那契数列的速度来进行JavaScript和WebAssembly代码的运行速度分析。

一、代码实现

1.裴波那契数列

首先是裴波那契数列的C代码：

int fib(int i){
    if(i == 1|| i==2)
    return i == 1;
    return fib(i-1)+fib(i-2);
}

将其编译为WebAssembly模块后（具体的编译方法可以参考我，在第二篇中提到的第三种方法，只编译生成WebAssembly模块，无需其他文件），创建如下html文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Fallback Example</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-touch-fullscreen" content="yes" />
  <meta name="format-detection" content="telephone=no, email=no" />
  <script type="text/javascript"  src="loader.js"></script>
</head>

<body>
  <h1>Fibonacci Sequence</h1>

<script>
    loadWebAssembly('fib.wasm').then(instance => {
      const fib  = instance.exports.fib

      for (let i = 1; i <= 40; ++i ){   
      const beg = performance.now()//时间戳的起点，performance函数用法可自行搜索
      fib(i) 
      const end = performance.now()//时间戳终点  
      console.log('用WebAssembly生成',i,'位的裴波那契数列，所需要的时间为：', `${end - beg}ms`)//输出计算裴波那契数量的时间

    }
    })
    function fibonacci(n) {//JavaScript代码，使用和c完全相同的函数
    if (n == 1 || n == 2) {
        return 1
    };
    return fibonacci(n - 2) + fibonacci(n - 1);
    }
    const beg = performance.now()
    for(let i = 1;i <= 40; ++i){
        const start = performance.now()
        fibonacci(i)
        const end = performance.now()
        console.log('用JavaScript生成',i,'位的裴波那契数列，所需要的时间为：', `${end - start}ms`)
    }
  </script>
</body>
</html>

然后启动本地服务器，使用命令：

emrun --no_broswer --port 8080 fib.html

在网页中打开后，控制台可看到结果

2.矩阵乘法

首先是矩阵乘法的multiple.c代码：

int WasmMultiple (double m[], int mr, int mc, 
              double n[], int nr, int nc, 
              double result[]) {
    if (mc != nr) {
        return -1;
    }
    for (int y = 0; y < mr; y++) {
        for (int x = 0; x < nc; x++) {
            double sum = 0;
            for (int k = 0; k < mc; k++) {
                sum += m[y * mc + k] * n[k * nc + x];
            }
            result[y * nc + x] = sum;
        }
    }
    return 0;
}

编译为WebAssembly模块后，实现multiple.html代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Fallback Example</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-touch-fullscreen" content="yes" />
  <meta name="format-detection" content="telephone=no, email=no" />
  <script src="../loader.js"></script>
  <script src="../JsMultiple.js"></script>
</head>

<body>
  <h1>Matrix Multipe</h1>

<script>
    var key = 10//控制次数，自行设定，我结果分析中使用了10，100，10000

    loadWebAssembly('./multiple.wasm').then(instance => {
      const WasmMultiple  = instance.exports.WasmMultiple
      const wasmresult = new Array(400)
      
      const beg = performance.now()
      for (let i = 1; i <= key; i++ ){
        const m = [];
        const n = [];
        for (let i = 0; i < 400; i++) {
        m.push(Math.random());
        n.push(Math.random());
        }
      WasmMultiple(m, 20, 20, n, 20, 20, wasmresult)
      }
      const end = performance.now()  
      console.log('用WebAssembly计算',key,'次矩阵乘法需要的时间为：', `${end - beg}ms`)
    })

    const jsresult = new Array(400)
    const start = performance.now()
    for (let i = 1; i <= key; i++ ){
        const m = [];
        const n = [];
        for (let i = 0; i < 400; i++) {
        m.push(Math.random());
        n.push(Math.random());
        }
      JsMultiple(m, 20, 20, n, 20, 20, jsresult)
      }
    const end = performance.now()
    console.log('用JavaScript计算',key,'次矩阵乘法需要的时间为：', `${end - start}ms`)

  
  </script>
</body>
</html>

启动本地服务器后，运行代码，在控制台中可以看到结果。

二、结果分析

1.裴波那契数列

由于前40位的裴波那契数列已经是很大的数值，为了避免数据溢出，我截取了14组数据，从15位裴波那契数列开始，到40位结束。结果图中可以看出，在20位之前，JavaScript和WebAssembly的运行速度相差无几，但是过了20位后，JavaScript的运行速度增长比WebAssembly快得多，在第40组的时候，WebAssembly只有JavaScript的三分之二左右，虽然官方给出的相关数据中，WebAssembly只用了JavaScript三分之一的时间，但是，我在运行过程中发现，谷歌浏览器会对JavaScript代码进行优化，40组的时候的数据已经足够开启这种代码优化的次数，谷歌浏览器的优化原理会在后面进行具体阐述。
在这里插入图片描述

2.矩阵乘法

我进行了这一组测试，产生了一个有趣的现象，WebAssembly的运行速度比JavaScript要慢得多。我利用同样的监听方法，同样的算法进行矩阵乘法运算，运行的结果如图所示。
在这里插入图片描述

明明裴波那契数列中WebAssembly的优势显而易见，但是在求矩阵乘法的过程中却截然相反，经过查阅官方文档，我发现会有如此大的问题的原因是因为WebAssembly在进行矩阵乘法时依赖于JavaScript生成的数据，也就是说多出来的时间消耗，是因为WebAssembly和JavaScript进行了大量的数据交换，然后更改代码，将生成随机数的代码放到WebAssembly模块中后，运行时间直线下降。
所以，在利用WebAssembly加速时，需要尽可能的避免和JavaScript有过多的数据交换，否则会导致很大的时间开销。总体来说，WebAssembly的运行速度优于JavaScript。