WebAssembly简单案例

芋圆社区 > 编程 > JavaScript > WebAssembly简单案例

616

2023-06-05

Hey、小怪兽

• WebAssembly（简称wasm），简单来说可以在浏览器运行C，C++，Rust等代码
• 简单学习的话可以看一下官网和在线编辑网站（点击跳转）：webassembly官网，webAssembly在线编译（需要科学上网）
• 用斐波那契简单举个例子，先打开在线编译网站，用C++在左边写一个斐波那契，然后点击COMPILE，之后就会自动编译，编译好了点击中间Wat的DOWNLOAD下载：
• 之后把这个和html，js放到一起：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
</head>
<body>
</body>
</html>

• 编写JS：

/** 用wasm获取c++写的fib函数 */
const loadWebAssembly = (fileName) => {
    return fetch(fileName)
        .then((response) => response.arrayBuffer())
        .then((buffer) => WebAssembly.compile(buffer))
        .then((module) => {
            return new WebAssembly.Instance(module);
        });
};

loadWebAssembly("./test.wasm").then((instance) => {
    fibc = instance.exports._Z3fibi;
});

/** 用js写fib函数 */
const fibj = (n) => {
    if (n <= 1) {
        return n;
    }
    return fibj(n - 1) + fibj(n - 2);
};

/** 测试时间 */
const perfoc = (n) => {
    const startTime = performance.now();
    fibc(n);
    const endTime = performance.now();
    console.log("c++ fib function time", endTime - startTime, "ms");
    return "====================";
};
const perfoj = (n) => {
    const startTime = performance.now();
    fibj(n);
    const endTime = performance.now();
    console.log("js fib function time:", endTime - startTime, "ms");
    return "====================";
};

• 打开页面-控制台就可以看到了，C++运行181毫秒，JavaScript运行305毫秒：

上一篇：定制Console.log

下一篇：一些常用的方法【持续更新】

WebAssembly简单案例

回复