关于web assembly技术的初步探索

ming7
439 阅读3分钟

引言

web assembly是一种可以使用非js编程语言编写代码并且能在浏览器上运行的技术方案，也是一种新的字节码格式，其目的是为了充分发挥硬件能力以达到原生的执行效率。

web assembly 中文地址：点这里

关于 WebAssembly 的背景

早在2019年12月5日，Web Assembly正式成为W3C的标准，加入到了HTML，CSS，Javascript的行列中，成为了前端的第四剑客。

首先来看看JS代码等执行过程：

  • 拿到了 JS 源代码，交给 Parser，生成 AST
  • ByteCode Compiler 将 AST 编译为字节码（ByteCode）
  • ByteCode 进入翻译器（JIT），翻译器将字节码一行一行翻译为机器码（Machine Code），然后执行

有了web assembly之后：

关于 WebAssembly 的优势

文件加载：Web assembly文件体积更小，所以下载速度更快

解析：解析Web assembly比解析js要快

编译和优化：编译和优化所需的时间较少，因为在将文件推送到服务器之前已经进行了更多优化，js需要为动态类型多次编译代码

重新优化：Web assembly代码不需要重新优化，因为编译器有足够的信心可以在第一次运行时获得正确的代码。

执行：执行速度更快，web assembly指令更接近机器码

垃圾回收：目前的web assembly不直接支持垃圾回收，垃圾回收都是手动控制，所以比自动垃圾回收的效率更高

安全：可以放hash和签名等

关于 WebAssembly 的应用

web assembly的应用场景很广泛，可用于视频和音频编解码器，图形和3D、多媒体和游戏，密码计算或便捷式语言实现等领域。比如在大型的js/html应用中复用一部分计算复杂的逻辑，就像一个助手库一样，可以提高一些性能。

下载对应的工具

这边用第一个工具作为示例

按照官网示例 clone 代码

git clone https://github.com/emscripten-core/emsdk.git

进入指定文件夹

cd emsdk

执行脚本文件

source ./emsdk_env.sh

接下来需要编写一个 c++ 文件

int add(int x, int y)
{
    return x + y;
}

int square(int x)
{
    return x * x;
}

int fib(int x)
{
    if (x <= 0)
        return 0;
    if (x <= 2)
        return 1;
    return fib(x - 1) + fib(x - 2);
}

接着在 emscripten 目录下执行命令

emcc ../../demo/wasmDemo/helloworld.cpp -Os -s WASM=1 -s SIDE_MODULE=1 -o helloworld.wasm

这样就会生成一个 helloworld.wasm 文件

也可以使用一个在线的工具去把c++代码编译成wasm格式

一个在线的WasmExplorer工具: 点这里

该工具同样可以编译成wasm格式文件，并且可以下载到本地

最后创建一个html文件

在script中加入下列代码：

      fetch('helloworld.wasm')
        .then((response) => response.arrayBuffer())
        .then((bytes) => WebAssembly.compile(bytes))
        .then((results) => {
          const instance = new WebAssembly.Instance(results)
          const a = instance.exports

          console.log(a)
          console.time('test wasm')
          a._Z3fibi(40)
          console.timeEnd('test wasm')
          console.time('test js')
          fib(40)
          console.timeEnd('test js')
        })

其中hellowrold.wasm存在于当前路径下

打开html文件

当看到在控制台打印log信息：

说明基于web assembly的happy path已经完成了

从 log 信息中可以看到对于斐波那契这个函数 wasm 执行的速度是要比 js 执行的速度快将近1倍之多

关于 WebAssembly 的未来

在web assembly的高性能、轻量和跨平台甚至可以脱离浏览器这样强大的特性下，在未来 web assembly的应用场景会越来越广阔，也就需要广大开发者们去维护开发这个前端第四剑客，同时 WebAssembly 也是由 W3C 主要负责开发，各大厂商，包括 Microsoft、Google、Mozilla 等赞助和共同维护的一个项目，相信 WebAssembly 会有一个非常值得期待的未来

avatar
文章
阅读
粉丝