前端进阶（十七）WebAssembly

曾经终败给现在 2022-01-06 06:47 631阅读 0赞

一、编译和解释

编程语言分为两类：

编译型：如C/C++

解释型：如Java/Python/JS

编译型语言，代码需要经过下面的步骤转成机器码：

文本 -> 汇编语言 -> 可运行机器码

文本经过此法分析、语法分析、语义分析转成汇编语言，其实解释性语言也是需要经过这个步骤。然后再把汇编语言翻译成机器码，汇编和机器码是两个比较接近的语言，只是汇编不需要去记住哪个数字代表哪个指令。

二、WebAssembly介绍

WASM优势在于它不需要解释器，可以直接转成汇编代码，所以运行速度提升明显。

Mozilla公司最早开发的asm.js，后来慢慢主流的浏览器都支持asm，并发展成WASM。它的特点是强类型，一般认为WASM是JS的一个子集，它的特点是强类型，并且只支持整数、浮点数、函数调用、数组、算数计算等。

注意：WebAssembly 只能在 Node8.0 以上版本正常工作。

三、WASM demo

1、先安装一个转换工具，将asm文件转成wasm文件

mac：

cmake make Clang/XCode

winddows：

cmake make VS2015以上

再安装一个

WebAssembly binaryen(asm2wasm)

2、写add.asm.js,按照asm规范

//add.asm.js
    function(){
        "use asm";
        function add(x, y){
            x = x | 0;
            y = y | 0;
            return ( x + y) | 0;
        }
    
        return {add: add};
    }

3、生成wasm格式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70][]

4、前端使用Promise接收

fetch("add.wasm").then(res => 
        res.arrayBuffer())
    ).then(buffer => 
        WebAssembly.compile(buffer)    
    ).then ( module => {
        var imports = {env: {}};
        Object.assign(imports.env, {
            memoryBase:0,
            tableBase:0,
            memory:new WebAssembly.Memory({ initial: 256, maximum: 256}),
            table: new WebAssembly.Table({ initial: 0, maximum:0, element:'anyfunc' })
        })
        var instance = new WebAssembly.Instance(module, imports);
        var add = instance.exports.add;
        console.log(add, add(5, 6));
    })

先去加载add.wasm文件，接着把它翻译成机器码，再new一个实例，然后就可以用exports的add函数了。

四、WASM和js比较

1、速度比较

计算1-46的斐波那契值，重复一百万次，wasm要比js快一倍

![20190624171121308.png][]

2、解析时间

分别比较解析100、200、20000行代码的时间

![2019062417120525.png][]

3、文件大小比较

20000行代码，wasm只有3.4k，压缩后的js还有165k

4、wasm优缺点

适合对计算性能要求高的，如图形计算方面，缺点是它的类型检查比较严格，写js编译经常会报错，不方便debug。

目前wasm已经非常活跃，我非常看好它的未来，我觉得今后前端能做的事情会越来越多，js是最好的语言！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70]: /images/20211227/c1111f461c0d4bf99fd6389d43dd8cc5.png
[20190624171121308.png]: /images/20211227/822bf688341f42f9a21baedf03725099.png
[2019062417120525.png]: /images/20211227/00bdaa6cdfe7467cbc12a5a11acb1f4d.png