【JSConf EU 2018】WebAssembly 的手工艺术

在今年欧洲的JSConf上Emil Bay进行了一场题为《Hand-Crafting WebAssembly》的演讲。Emil表示：“如今已经有不少关于WebAssembly(WASM)的演讲。遗憾的是，大多数演讲是关于如何把高级语言编译成wasm的，他们把wasm当成一个半透明的盒子。WebAssembly是一门有趣的语言，你能够用它写出性能低于C的代码”。在这此的演讲中，Emil向咱们演示了如何写WAT（WebAssembly的文本格式）以及当拥有大内存时，如何推理算法，如何将高级结构（如循环）转换为基础指令，同时得到乐趣！Emil演示了如何把一些难度逐渐递增的算法转换成基础指令，在没有抽象的状况下每个算法的实现都充满着挑战。即时你在工做中并无使用WASM，学习计算机的最低级指令能够拨开抽象的迷雾，揭示计算机的神奇。在开始正文以前让咱们先一睹大佬风采 👇

什么是WebAssembly

“WebAssembly（缩写Wasm）是运行在一个基于栈的虚拟机上的二进制指令格式。Wasm是为了把像C/C++/Rust等高级语言编译成便携式的目标而设计的，能够被部署到Web端和服务端应用”。 这是WebAssembly官网的解释，听起来不错，可是今天咱们能够忘记这些，由于咱们今天用不到这些高深的技术术语。经过“WebAssembly”这个单词你可能猜测它运行在浏览器端的汇编语言。实际上，它既不是很Web，也不是很Assembly（Not very Web, not very Assembly）。

为何这么说WebAssembly “Not very Web, not very Assembly”呢？

• 它不能直接使用Web API。
• WebAssembly代码不是直接运行在物理机上的，虽然它很接近物理机，但它仍然是一个抽象出来的运行环境。
• 不能系统调用，除非你经过JavaScript给它调用通道。
• 不能使用新的硬件设备。例如：蓝牙。
• 没什么魔法，只是计算。

吐槽了那么多，到底WebAssembly是什么呢？

• 64位整型(i64) WebAssembly最让我兴奋的的是它可使用64位的整型数字，这让咱们能够精确的描述那些须要数字计算的事物。因为个人工做是关于密码学的，咱们常常须要处理256位或者512位长度的二进制数字，64位整型数字的支持对性能提高确实颇有效。

• 性能提高(Performance Boost) 人们一般经过把代码转换成WebAssembly来得到性能的提高，可是根据个人经验一般收益不像想象的那么大。我经过之前一些实验得出WebAssembly相对JavaScript性能大约提高了20%至30%。由于JavaScript在一些新的JavaScript引擎(v八、SipderMonkey等)上已经运行的很快了！

• 精度/可预测性(Precision/Predictable) 使用JavaScript写代码的时候，你一般不知道写出来的代码性能怎么样，除非你研究过底层的虚拟机。使用WebAssembly你更接近代码的底层运行，因此代码的表现或性能将更加可预测。

• Run anywhere 另外一件，让人感到兴奋的的事是WebAssembly可能在不久之后成为惟一一个能够跨平台、跨端运行的语言。我已经看到有人在使用WebAssembly写Linux内核的项目，还有人在浏览器里加载WebAssembly模块。

WebAssembly不是什么将来的黑科技，如今丹麦已经有超过77%的浏览器支持，而全球也已经有超过73%的浏览器支持，并且Node.js 8.0以上也支持WebAssembly，因此你如今就可使用它。

WebAssembly Text-format

下面咱们要手撸WebAssembly，而不是经过高级程序语言编译成WebAssembly。 WebAssembly是一种二进制格式的低级(low level)类汇编语言，官方为了让人类可以阅读和编辑它，还提供了相应的文本格式(wat)。

1. 平方运算

从一个简单的平方计算的函数开始咱们的第一个WebAssembly模块：

(module 
    (func $square
        (export "square")
        (param $x i32)
        (result i32)
        (return (i32.mul (get_local $x)
                         (get_local $x)))))
复制代码

这里咱们定义了一个平方运算的函数square，它接受一个你i32类型的参数，返回结果也是i32。经过这个模块咱们应该注意到如下几点：

• wat文本采用的是S-expressions的语法（相似LISP）。
• 模块是WebAssembly的基本单位，这点和ES6的模块很像。
• 标签（参数名、变量名和函数名）使用 $ 前缀声明。
• 明确的类型，参数、变量、函数返回都有类型声明。
• 运算操做是经过type.op形式的指令调用，type表明运算结果的类型，op是要作的运算操做。如：i32.mul表示要作乘法运算（mul），运算操做的结果的类型是i32（32位整型数字）。
• 显示访问，当要使用一个变量时，咱们须要显示访问。如：get_local $x，咱们使用get_local显示访问了本地变量x。

咱们来看下这个模块是如何使用的？

1. 将上面的“First module”保存到square.wat文件。你也能够从handcrafting-webassembly这个仓库直接克隆获取源码。

2. 安装编译工具wabt和wat2js。

   $ git clone --recursive https://github.com/WebAssembly/wabt
   $ cd wabt
   $ make  #cmake, git, make required
   $ npm i -g wat2js
   复制代码

   • 安装完成后将 /wabt/bin目录添加到系统的环境。mac是添加到*/etc/paths*文件。

3. 生成wasm模块和JavaScript胶水代码文件

   $ wat2wasm square.wat  #生成square.wasm文件
   $ wat2js square.wat -o square.js  #生成加载wasm模块的CommonJS模块
   复制代码

4. 使用wasm模块。新建example.js，添加以下代码:

   var wasm = require('./square.js');
   console.log(wasm.exports.square(2));  // 4 
   复制代码

经过这个简单的WebAssembly小模块，咱们应该已经掌握了WebAssembly文本格式一些基本语法以及如何使用它。接下来咱们来看下Emil在实际工做中写的代码。

2. 计算两点之间距离

下面的这段代码定义并导出了一个f64.distance的函数，它接受四个参数分别是x一、y一、x二、y2，返回一个64位浮点型数字。这段代码仍是比较好理解的，有了以前的“First Module”的经验你应该已经知道如何使用它。一样，你能够在handcrafting-webassembly找到它的源码。

(module 
    (func $square
        (export "square")
        (param $x i32)
        (result i32)
        (return (i32.mul (get_local $x)
                         (get_local $x))))

    (func $f64.distance
        (export "f64.distance")
        (param $x1 i32) (param $y1 i32)
        (param $x2 i32) (param $y2 i32)
        (result f64)
        
        (local $x.dist i32)
        (local $y.dist i32)
        
        (set_local $x.dist (i32.sub (get_local $x1)
                                    (get_local $x2)))
        
        (set_local $y.dist (i32.sub (get_local $y1)
                                    (get_local $y2)))
        
        (return (f64.sqrt (f64.convert_u/i32 (i32.add (call $square (get_local $x.dist))
                                   (call $square (get_local $y.dist)))))))
                                   
)
复制代码

让咱们把难度再提高一个等级。

3. 计算矢量间的距离

矢量间距离计算，其实至关于两个数组间距离的计算。这段代码的难度就增长了不少！这里用到了WebAssembly的线性内存（Linear memory）和loop指令。

• memory是WebAssembly的一个重要的概念，它是用来实现JavaScript和WebAssebly模块间通讯的，本质上就是一个大的共享数组。下面的模块中，咱们建立并导出了一页（64KiB）大小的momery实例。导出的memory实例是提供给JavaScript使用。经过JavaScript把外部数组的数据存到memory，而后咱们能够WebAssebly模块里访问它。
• loop指令用来定义循环代码块。紧跟在loop指令后面须要定义一个标签，在这里咱们定义的是“continue”。WebAssembly的循环和JavaScript有些不一样。在JavaScript的循环里有continue和break两个分支。WebAssembly的循环比较像do-while循环，但它只有一个条件分支，当br_if条件为真的时候，继续执行指定标签的循环。

(module 
    (memory (export "memory") 1)

    (func $i8.distance
        (export "i8.distance")
        (param $v.ptr i32)
        (param $w.ptr i32)
        (param $len i32)
        (result f64)
        
        (local $distance.sq i32)
        (local $elm i32)
        (local $offset i32)
        
        (set_local $distance.sq (i32.const 0))
        
        (loop $continue
            ;; $elm = $w[$offset] - $v[$offset]
            (set_local $elm (i32.sub (i32.load8_u (i32.add (get_local $w.ptr)
                                                           (get_local $offset)))
                                     (i32.load8_u (i32.add (get_local $v.ptr)
                                                           (get_local $offset)))))
            ;; $distance.sq += $elm ** 2
            (set_local $distance.sq (i32.add (get_local $distance.sq)
                                             (i32.mul (get_local $elm)
                                                      (get_local $elm))))
            ;; $offset++ < $len ? continue : break
            (br_if $continue (i32.lt_u (tee_local $offset 
                                                 (i32.add (get_local $offset)
                                                          (i32.const 4))) ;; bytewidth of i32
                                       (get_local $len))))

    (return (f64.sqrt (f64.convert_u/i32 (get_local $distance.sq))))))
复制代码

经过这个例子，咱们来看下数字在memory里面是如何存储的。以下图，咱们能够看到i8类型表示的是八个比特位(bit)整型数字，也就是一个字节(byte)。i32表示的是四个字节长度的整型数字，f64表示的是八个字节的浮点型数字。因此说memory其实就是一个字节数组。在JavaScript里面数字只有Number类型，咱们也不须要关心数字在内存中是如何存储的，可是在WebAssembly里，你必须知道如何为一个数字分配合适它的内存（定义合适的类型）。

那咱们是如何解析数组的呢？答案是经过指针(pointer)和数组的长度(length)。在这里指针也就至关于数组的下标(index)，长度也就是数组分配的内存大小。

总结

经过手撸三个难度递增的的WebAssembly模块，对于理解WebAssembly在内存使用和运行机制应该有所收益。可是仍是要提醒你们手撸WebAssembly并不符合它的设计初衷。演讲的最后阶段，Emil还介绍了本身加密算法库sodium-native和sodium-universal(广告时间 啊哈～），若是你感兴趣的话能够移步到他的gayhub。(完