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 官網