webAssembly初探

最新推荐文章于 2025-05-08 12:45:00 发布

coderlin_

最新推荐文章于 2025-05-08 12:45:00 发布

阅读量1.1k

点赞数 17

文章标签： wasm javascript 开发语言

本文链接：https://blog.youkuaiyun.com/lin_fightin/article/details/143077580

版权

学习地址: https://www.bilibili.com/video/BV13i4y1n74s/?spm_id_from=333.337.search-card.all.click&vd_source=a6f7db332f104aff6fadf5b3542e5875

什么是WebAssembly

官网：
在这里插入图片描述

在这里插入图片描述

MDN

在这里插入图片描述

简单说：webAssembly是一种可使用非js编程语言编写的代码(c++,go)并且能在浏览器上运行的技术方案，实际上，是一种新的字节码格式。（可以使用其他语言，生成二进制，在浏览器中运行）

在这里插入图片描述

优势

在这里插入图片描述

demo

用c编写斐波序列

#ifdef __cplusplus
extern "C" {
#endif

int fit(int n) {
    if (n <= 1) {
        return n;
    } else {
        return fit(n-1) + fit(n-2);
    }
}

#ifdef __cplusplus
}
#endif

然后用emcc转为wasm文件，
sudo emcc ../hello.c -o test4.js -s WASM=1 -s MODULARIZE=1 -s EXPORTED_FUNCTIONS="['_fit']"
指定导出函数为fit
然后在html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function fib(x) {
            if (x <= 1) {
                return x
            }
            return fib(x - 1) + fib(x - 2)
        }
        console.log('===');
        const start = Date.now()
        fib(40);
        console.log('js结束:', Date.now() - start, 'ms');


        fetch('./test4.wasm').then(res => {
            return res.arrayBuffer()
        }).then(bytes => {
            return WebAssembly.instantiate(bytes)
        }).then(results => {

            const start = Date.now()
            const fit = results.instance.exports.fit;
            fit(40);
            console.log('wasm 结束:', Date.now() - start, 'ms');

        })
    </script>
</body>

</html>

先用js实现斐波序列，运行40，再引入wasm，使用其导出的fit函数，运行fit(40)，分别计算花费时间。

测试结果:

在这里插入图片描述

相差并不是很大。

使用wasm

步骤

1 编写其他语言的代码，
2 编译为wasm代码，
3 在浏览器请求，直接使用，如上。

浏览器提供了一个api，WebAssembly

加载wasm模块

为了在js中使用wasm，在编译/实例化之前，需要讲模块放入内存。
上述我们用的是res.arrayBuffer()，将字节码转为了ArrayBuffer

fetch("module.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => WebAssembly.instantiate(bytes, importObject))
  .then((results) => {
    // 使用 results 做些什么！
  });

浏览器目前有个WebAssembly.instantiateStreaming，可以直接在网络的原始字节流上执行操作。如

WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then(
  (results) => {
    // 使用 results 做些什么！
  },
);

改用下面的写法更加方便
在这里插入图片描述
在results中有个instance，可以理解成wasm的实例，再然后通过exports可以拿到导出的属性。如上，通过exporst拿到导出的fit函数。
然后直接执行。