自从Brendan Eich用十天时间创造了JavaScript，人们对它的吐槽就从未间断过。众所周知JavaScript是一门动态语言。运行于JavaScript引擎中，我们熟悉的有Mozilla的SpiderMonkey，Safari的JavaScriptCore，Edge的Chakra还有大名鼎鼎的V8。V8引擎将JavaScript的运行效率提升到一个新的level。所以后来的Nodejs也采用V8作为引擎，实现了用js进行后端开发的愿景。
然而JavaScript发展到今天，其语言基因中存在的缺陷并不能得到根本性的改变。比如常见的加法操作
function add(a, b) {
return a + b;
}这段代码在浏览器中的运行过程比你想象的复杂。
add在被调用前，js引擎并不能提前预判传入参数的类型，需要在运行时对参数进行如下一连串的类型判断和转换操作。
对js加法运算的详细操作(keng)有兴趣的可以看这篇文章。
V8再快也难以逾越语言本身的瓶颈。这种问题是动态语言的弊端，对于此类问题，业界已经出现了非常多的解决方案。
而本文要讲的正是目前最为前沿的一种 ------ WebAssembly。
WebAssembly这个概念其实2015年就提出来了，而就在不久之前，四大浏览器厂商，Chrome, Firefox, Edge, Safari 在新版的浏览器中才全部默认支持Webassembly(Chrome, Firefox早于后两者)，这种技术很快将在前端高性能开发领域中大放异彩。
WebAssembly是什么？
下面是来自官方的定义：
WebAssembly or wasm is a new portable, size- and load-time-efficient format suitable for compilation to the web.
关键词：”format"，WebAssembly 是一种编码格式，适合编译到web上运行。
事实上，WebAssembly可以看做是对JavaScript的加强，弥补JavaScript在执行效率上的缺陷。
它是一个新的语言，它定义了一种AST，并可以用字节码的格式表示。
它是对浏览器的加强，浏览器能够直接理解WebAssembly并将其转化为机器码。
它是一种目标语言，任何其他语言都可以编译成WebAssembly在浏览器上运行。
想象一下，在计算机视觉，游戏动画，视频编解码，数据加密等需要需要高计算量的领域，如果想在浏览器上实现，并跨浏览器支持，唯一能做的就是用JavaScript来运行，这是一件吃力不讨好的事情。而WebAssembly可以将现有的用C，C++编写的库直接编译成WebAssembly运行到浏览器上, 并且可以作为库被JavaScript引用。那就意味着我们可以将很多后端的工作转移到前端，减轻服务器的压力。这是WebAssembly最为吸引人的特性。并且WebAssembly是运行于沙箱中，保证了其安全性。
为什么要有WebAssembly?
如果只是想让C,C++，Java等原生语言编写的模块运行在浏览器上。我们只需要一个转换器，将源语言转换为目标语言JavaScript，而这种技术其实很早就有了。
例如将Java转换成JavaScript的Google Web Toolkit (GWT)
将python转换成JavaScript的pyjamas 等等。
但是这并没有解决JavaScript执行慢的问题，这跟直接用JavaScript来重写代码库是一样的作用。这就是为什么Electron能直接运行Node.js但对比传统桌面应用依然弱鸡的原因。
要理解JavaScript为什么运行慢，就要理解它在引擎中的处理过程。
传统JavaScript在V8引擎中的编译过程是这样的：首先JavaScript会被编译成AST，然后引擎再将AST, 转化为机器语言交给底层执行。
V8的pipeline结构会进一步先将AST转化为一种中间代码，再对中间代码再次生成优化后的机器码，从而实现更快的执行速度。
对于WebAssembly来说，前面的parser, optimize 全部省了，直接编译到机器码。
浏览器通过增加一种语言格式的编译支持，来实现执行效率的突破。
WebAssembly除了运行快之外，其特殊的二进制表示法也大大减小了代码包的大小。同时提升了浏览器的加载速度。
如何使用WebAssembly?
现在你已经能在这些浏览器中使用WebAssembly了。
WebAssembly这么快，但并不意味着JavaScript这门语言要从此绝迹了。
如前面所说，WebAssembly和JavaScript之间是可以相互调用的。
假设我们用C写了这段代码
include
int add(int a, int b) {
return a + b;
} 首先将其转化为wasm文件, 这里运用一个线上的工具 WasmFiddle
将转化的add.wasm下载下来。
由于目前还没支持 的引入方式。所以不能直接在html引入，我们可以通过JS fetch来请求文件。
先封装一个fetch方法：
function fetchAndInstantiateWasm (url, imports) {
return fetch(url)
.then(res => {
if (res.ok)
return res.arrayBuffer();
throw new Error(`Unable to fetch Web Assembly file ${url}.`);
})
.then(bytes => WebAssembly.compile(bytes))
.then(module => WebAssembly.instantiate(module, imports || {}))
.then(instance => instance.exports);
}用定义好的fetchAndInstantiateWasm方法请求add.wasm文件,并在回调中调用C中定义的add方法，成功输出结果15。
fetchAndInstantiateWasm('add.wasm', {})
.then(m => {
console.log(m.add(5, 10)); // 15
});同样通过js import，也能够在C中调用js的方法。
fetchAndInstantiateWasm('program.wasm', {
env: {
consoleLog: num => console.log(num)
}
})
.then(m => {
console.log(m.add(5, 10)); // 15
});上面在js代码中定义了consoleLog, 并传入了wasm文件，在C中就可以调用consoleLog方法往控制台输出信息，你也可以执行一些你想要的其他操作。
#include
void consoleLog(int num);
int add(int num1, int num2) {
int result = num1 + num2;
consoleLog(result);
return result;
} 可直接下载demo代码执行查看效果 demo。
运行python -m SimpleHTTPServer后访问localhost:8000, 查看log中输出信息。
前面说WebAssembly是一门新的语言，但上面引入的wasm只是一种字节码，是作为其他语言编译的目标语言，完全没有可读性。其实WebAssembly是有自己的语法的，文件格式为wast。下面是add方法编译成的WebAssembly版本。
(module
(type $FUNCSIG$vi (func (param i32)))
(import "env" "consoleLog" (func $consoleLog (param i32)))
(table 0 anyfunc)
(memory $0 1)
(export "memory" (memory $0))
(export "add" (func $add))
(func $add (param $0 i32) (param $1 i32) (result i32)
(call $consoleLog
(tee_local $1
(i32.add
(get_local $1)
(get_local $0)
)
)
)
(get_local $1)
)
)
wast是可编辑的，它同样可以直接转化为wasm, 用于浏览器引入。
上面只是一个最简单的例子，实际上利用WebAssembly实现的应用已经可以相当酷炫。
官方展示的demo游戏
还有一个运用webassembly实现的浏览器视频编辑器
和其他类似技术的区别?
asm.js
可能对前端比较关注的同学有听说过asm.js。它是Mozilla开发的一个JavaScript的子集。就是在JavaScript的基础上，加入了静态类型的支持。
asm.js是Mozilla开发的，所以只支持自家浏览器Firefox。当然代码也可以兼容运行于其他浏览器，但是就没有了优化效果。
asm.js 提供一种语法来表示变量类型
var first = 5;
var second = first;对于上面这段JavaScript代码，在asm.js里是这样写的
var first = 5;
var second = first | 0;在first后面加上|0，我们就将first标记为32位整数，而被赋值的second也为被定义为32位整数。
在Mozilla引擎编译代码的时候，遇到这些标志就会提前知道变量的类型，提前优化代码。而这些标记也不影响其他引擎的运算结果。
然而说到底它还是JavaScript，只不过我们提前为优化做了准备。代码还是要经过JavaScript Code ->AST->Optimize的过程。
另外asm.js也是支持将C，C++转化为asm.js的，有兴趣的可以参考这里
TypeScript
大家应该也知道微软的TypeScript，TypeScript做的工作其实跟asm.js有点类似，只不过TypeScript是更加High-Level的。他是JavaScript的一个超集，就是在JavaScript的基础上支持了类型和类等语法。并且能直接编译为JavaScript。TypeScript在于能在开发阶段就进行类型检查，保证代码开发效率和安全性。但是从浏览器运行效率上来看并没有优化效果，因为浏览器并不原生支持。
相同功能的还有facabook的Flow，也是在开发阶段加入类型的支持。
结语
目前WebAssembly由W3C WebAssembly Community Group负责开发与标准定制，而该组织的成员正是来自Google, Microsoft, Mozilla等浏览器开发人员。几个大厂同时投入到WebAssembly的开发中，相信不久WebAssembly就会成为一种浏览器网站&应用的通用优化技术。
参考资料