WebAssembly介绍

前言

背景

在介绍WebAssembly，咱们先对发展历史作一个介绍。 话说JS诞生之时，只是做为一个胶水用的，能缝缝补补就行，后来发现好像挺重要的，因而就改吧改吧，用着用着还算能够，在JIT技术和v8引擎没出来是，JS勉强能用，可是面对大需求就不是很好了.

因而各大厂商都准备推出本身的解决方案了，Google的Dart,Firefox的asm.js,MirroSoft的TypeScript，可是各有各的缺陷，同时v8使得js焕发了第二春，同时各大平台没有的统一的规范也不是很好，因而乎WebAssembly出世了

编译原理

JS之因此运行慢是由于，浏览器的JS引擎是须要边解释边运行的，同时做为弱类型，在不少优化也不是很好，虽然有JIT优化，可是速度仍是堪忧

WebAssembly是什么？

WebAssembly使用C语言(或TS等等)编写通过编译成字节码而成的，在浏览器中，至关于能够直接编译成机器码，几乎能够直接运行

1. 生成WebAssembly的C代码:

// c
int add42(int num){
    return num + 42
}
// ts
export function f(x: i32): i32 {
  if (x === 1 || x === 2) {
      return 1;
  }
  return f(x - 1) + f(x - 2)
}
复制代码

2. WASM Explorer编译成c字节码,asc编译ts

00 61 73 6D 0D 00 00 00 01 86 80 80 80 00 01 60
01 7F 01 7F 03 82 80 80 80 00 01 00 04 84 80 80
80 00 01 70 00 00 05 83 80 80 80 00 01 00 01 06
81 80 80 80 00 00 07 96 80 80 80 00 02 06 6D 65
6D 6F 72 79 02 00 09 5F 5A 35 61 64 64 34 32 69
00 00 0A 8D 80 80 80 00 01 87 80 80 80 00 00 20
00 41 2A 6A 0B
复制代码

3. 加载.wasm模块到JavaScript MDN文档

fetch('f.wasm') // 网络加载 f.wasm 文件
    .then(res => res.arrayBuffer()) // 转成 ArrayBuffer
    .then(WebAssembly.instantiate) // 编译为当前 CPU 架构的机器码 + 实例化
    .then(mod => { // 调用模块实例上的 f 函数计算
    console.log(mod.instance.add42(50));
    });
复制代码

编译过程对比

相对于JS

• Parsing - 源代码解释成运行代码
• Compiling+optimizing - 编译和优化阶段
• Re-optimizing - JIT假设优化出错，丢弃优化，重优化重编译
• Exection - 执行
• Garbage collection - 垃圾回收 而WebAssembly

  

WebAssembly的优点

1. 文件抓取阶段，WebAssembly由于是字节码因此体积比js小不少
2. 解析阶段，解析时间更短
3. 编译优化执行阶段都是WebAssembly更具备优点

相关

一个Unity坦克游戏 斐波那契数列

---

参考资料 WebAssembly 现状与实战 深刻浅出 JIT 编译器 WebAssembly 系列 WebAssembly 官网