Web Assembly

WebAssembly是什么？

定义

首先我们给它下个定义。

WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式

例子

当然，我知道，即使你看了定义也不知道WebAssembly到底是什么东西。废话不多说，我们通过一个简单的例子来看看WebAssembly到底是什么。

c++

int factorial(int n){
  if(n == 0)
    return 1;
   else
    return n*factorial(n-1);
}

binary

text

get_local 0
i64.const 0
i64.eq
if i64
    i64.const 1
else
     get_local 0
     get_local 0
     i64.const 1
     i64.sub
     call 0
     i64.mul
end

上面分别是用C++实现的求递归的函数。中间是十六进制的Binary Code。右侧是指令文本。可能有人就问，这跟WebAssembly有个屁的关系？其实，中间的十六进制的Binary Code就是WebAssembly。

编译目标

大家可以看到，其可写性和可读性差到无法想象。那是因为WebAssembly不是用来给各位用手一行一行撸的代码，WebAssembly是一个编译目标。什么是编译目标？当我们写TypeScript的时候，Webpack最后打包生成的JavaScript文件就是编译目标。可能大家已经猜到了，上图的Binary就是左侧的C++代码经过编译器编译之后的结果。

WebAssembly的由来

性能瓶颈

在业务需求越来越复杂的现在，前端的开发逻辑越来越复杂，相应的代码量随之变的越来越多。相应的，整个项目的起步的时间越来越长。在性能不好的电脑上，启动一个前端的项目甚至要花上十多秒。这些其实还好，说明前端越来越受到重视，越来越多的人开始进行前端的开发。

但是除了逻辑复杂、代码量大，还有另一个原因是JavaScript这门语言本身的缺陷，JavaScript没有静态变量类型。这门解释型编程语言的作者Brendan Eich，仓促的创造了这门如果被广泛使用的语言，以至于JavaScript的发展史甚至在某种层面上变成了填坑史。为什么说没有静态类型会降低效率。这会涉及到一些JavaScript引擎的一些知识。

静态变量类型所带来的问题

这是Microsoft Edge浏览器的JavaScript引擎ChakraCore的结构。我们来看一看我们的JavaScript代码在引擎中会经历什么。

JavaScript文件会被下载下来。
然后进入Parser，Parser会把代码转化成AST（抽象语法树）.
然后根据抽象语法树，Bytecode Compiler字节码编译器会生成引擎能够直接阅读、执行的字节码。
字节码进入翻译器，将字节码一行一行的翻译成效率十分高的Machine Code.

asm.js出现

所以为了解决这个问题，WebAssembly的前身，asm.js诞生了。asm.js是一个Javascript的严格子集，合理合法的asm.js代码一定是合理合法的JavaScript代码，但是反之就不成立。同WebAssembly一样，asm.js不是用来给各位用手一行一行撸的代码，asm.js是一个编译目标。它的可读性、可读性虽然比WebAssembly好，但是对于开发者来说，仍然是无法接受的。

asm.js强制静态类型，举个例子。

function asmJs() {
    'use asm';

    let myInt = 0 | 0;
    let myDouble = +1.1;
}

为什么asm.js会有静态类型呢？因为像0 | 0这样的，代表这是一个Int的数据，而+1.1则代表这是一个Double的数据。

asm.js不能解决所有的问题

可能有人有疑问，这问题不是解决了吗？那为什么会有WebAssembly？WebAssembly又解决了什么问题？大家可以再看一下上面的ChakraCore的引擎结构。无论asm.js对静态类型的问题做的再好，它始终逃不过要经过Parser，要经过ByteCode Compiler，而这两步是JavaScript代码在引擎执行过程当中消耗时间最多的两步。而WebAssembly不用经过这两步。这就是WebAssembly比asm.js更快的原因。

WebAssembly横空出世

所以在2015年，我们迎来了WebAssembly。WebAssembly是经过编译器编译之后的代码，体积小、起步快。在语法上完全脱离JavaScript，同时具有沙盒化的执行环境。WebAssembly同样的强制静态类型，是C/C++/Rust的编译目标。

什么时候使用WebAssembly？

说了这么多，我到底什么时候该使用它呢？总结下来，大部分情况分两个点。

对性能有很高要求的App/Module/游戏
在Web中使用C/C++/Rust/Go的库
举个简单的例子。如果你要实现的Web版本的Ins或者Facebook，你想要提高效率。那么就可以把其中对图片进行压缩、解压缩、处理的工具，用C++实现，然后再编译回WebAssembly。

WebAssembly的几个开发工具

AssemblyScript。支持直接将TypeScript编译成WebAssembly。这对于很多前端同学来说，入门的门槛还是很低的。
Emscripten。可以说是WebAssembly的灵魂工具不为过，上面说了很多编译，这个就是那个编译器。将其他的高级语言，编译成WebAssembly。
WABT。是个将WebAssembly在字节码和文本格式相互转换的一个工具，方便开发者去理解这个wasm到底是在做什么事。

WebAssembly的意义

在我的个人理解上，WebAssembly并没有要替代JavaScript，一统天下的意思。我总结下来就两个点。

给了Web更好的性能
给了Web更多的可能

关于WebAssembly的性能问题，之前也花了很大的篇幅讲过了。而更多的可能，随着WebAssembly的技术越来越成熟，势必会有更多的应用，从Desktop被搬到Web上，这会使本来已经十分强大的Web更加丰富和强大。

练习

后面再做

Web Assembly

Web Assembly

相关链接

WebAssembly是什么？

定义

例子

c++

binary

text

编译目标

WebAssembly的由来

性能瓶颈

静态变量类型所带来的问题

asm.js出现

asm.js不能解决所有的问题

WebAssembly横空出世

什么时候使用WebAssembly？

WebAssembly的几个开发工具

WebAssembly的意义

练习

相关文章

发表评论

倒计时

日历

最新文章

分类

友情链接