WASM ?


![WebAssembly](http://upload-images.jianshu.io/upload_images/2544913-71d91ba1e4d7684e?imageMogr2/auto-orient/strip%7CimageView2/2/w/240)

WASM即WebAssembly,顾名思义是用在网页上的字节码技术。
作为一项新兴的技术,虽然目前社区建设方兴未艾,但在笔者看来,在未来它将成为划时代的一项技术。
JavaScript的广泛应用是有一定的偶然性,在很多人看来它也不是一门有着合理设计的语言。随着Web技术的不断发展,JavaScript的部分劣势凸显出来。于是有了Dart、TypeScript。
如果没有WASM的出现,JavaScript将会更广泛地成为事实编译语言。在部分团队,TypeScript已经逐渐成为替代JavaScript的存在。

Define a portable, size- and load-time-efficient binary format to serve as a compilation target which can be compiled to execute at native speed by taking advantage of common hardware capabilities available on a wide range of platforms, including mobile and IoT.
WebAssembly High-Level Goals

Compiling an example


本部分将参照Webassembly官网提供的教程,给读者提供编译C的指导

环境配置

需要的软件:

  • Git
  • CMake
  • GCC ( 编译器 )
  • Python 2.7

从Github获取repo:

1
2
3
4
$ git clone https://github.com/juj/emsdk.git
$ cd emsdk
$ ./emsdk install latest
$ ./emsdk activate latest

注意,Emscripten的安装需要一段时间(特别是在国内的特殊网络环境下),因此需要耐心等待。
安装完成之后,输入如下代码将其写入环境变量。

1
$ source ./emsdk_env.sh --build=Release

编译demo

1
2
3
$ mkdir demo
$ cd demo
$ vim demo.c

将如下代码写入demo.c文件

1
2
3
4
5
6
#include<stdio.h>
#include <emscripten/emscripten.h>
int main(int argc, char ** argv){
printf("Hello,World!\n");
return 0;
}

然后在终端中执行

1
$ emcc demo.c -s WASM=1 -o -o demo.js

命令中的各参数

  • * -s WASM=1 * 表示编译成WASM,而不是asm.js(这是emcc的默认选项)
  • * -o * 即编译优化级别
  • * demo.js * 即与wasm文件胶接的JavaScript文件

在浏览器中运行demo

在demo文件夹中新建demo.html文件,如下:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WASM:demo project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<script src="demo.js"></script>
</body>
</html>

使用Python2的SimpleHTTPServer创建服务

1
python2 -m SimpleHTTPServer

打开*localhost:8000/demo.html**,可以看到printf函数与console.log的效果类似,在Console中输出了Hello,World!***。

JavaScript与WebAssembly之间的调用

我们在hello.c文件中加入比较两数大小的函数

1
2
3
int EMSCRIPTEN_KEEPALIVE max(int a,int b){
return (a>b)?a:b;
}

我们在Console中输入如下代码

1
2
var max = _max; // 添加下划线来调用C函数
console.log(max(1,2))

即可看到输出了2,即调用了C代码中的max函数来比较1,2两个值的大小。
WASM执行流程

WASM展望

随着Web应用的逐步复杂化,各种技术栈层出不穷(TypeScript、asm.js)。然而JavaScript的低性能、弱类型等特性越来越不被复杂开发所待见。与其发明另一种语言来替代JavaScript(况且我觉得也不可能替代),不如直接应用其他重量级工业语言到前端,实现对JavaScript的降维打击(逃
笔者虽然接触前端开发更多,但是对JavaScript这门语言实在爱不起来。
个人认为,JavaScript已经不足以满足日益复杂的前端开发需求。与其对JavaScript修修补补,我们何不把目光放到更具前景的技术上呢?当然,这仅仅是表达对WASM的喜爱,正如当初对TypeScript的喜爱,很大程度都是源于对JavaScript的讨厌(再逃

参阅