前端进阶（十七）WebAssembly

一、编译和解释

编程语言分为两类：

编译型：如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格式

 

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快一倍

2、解析时间

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

3、文件大小比较

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

4、wasm优缺点

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

 

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