webassembly 的那些事

發表於2018-01-23
Web
簡介

JS於1995年問世，設計的初衷不是為了執行起來快。直到08年效能大戰中，許多瀏覽器引入了即時編譯 JIT(just-in-time編譯器)，JavaScript 程式碼的執行漸漸變快。正是由於這些 JIT 的引入，使得 JavaScript 的效能達到了一個轉折點，JS 程式碼執行速度快了 20 — 50倍。

JIT 是使 JavaScript 執行更快的一種手段，通過監視程式碼的執行狀態，把 hot 程式碼（重複執行多次的程式碼）進行優化。通過這種方式，可以使 JavaScript 應用的效能提升很多倍。

更多JIT工作原理，有興趣請移步：https://zhuanlan.zhihu.com/p/25669120640

 

隨著效能的提升，JavaScript 可以應用到以前根本沒有想到過的領域，比如用於後端開發的 Node.js。效能的提升使得 JavaScript 的應用範圍得到很大的擴充套件。

JavaScript的無型別是JavaScript引擎的效能瓶頸之一，在過去幾年，我們看到越來越多的專案問世，它們試圖通過開發編譯程式，將其他語言程式碼轉化為 JavaScript，以此讓開發者克服 JavaScript 自身存在的一些短板。其中一些專案專注於給程式語言增加新的功能，比如微軟的 TypeScript 和 Google 的 Dart，【設計一門新的強型別語言並強制開發者進行型別指定】或是加快 JavaScript 的執行速度，例如 Mozilla 的 asm.js 專案和Google的PNaCI【給現有的JavaScript加上變數型別】。

現在通過 WebAssembly，我們很有可能正處於第二個拐點。641

 

什麼是webAssembly?

WebAssembly是一種新的適合於編譯到Web的，可移植的，大小和載入時間高效的格式，是一種新的位元組碼格式。它的縮寫是”.wasm”，.wasm 為檔名字尾，是一種新的底層安全的“二進位制”語法。它被定義為“精簡、載入時間短的格式和執行模型”，並且被設計為Web 多程式語言目標檔案格式。 這意味著瀏覽器端的效能會得到極大提升，它也使得我們能夠實現一個底層構建模組的集合.

webAssembly的優勢

webassembly相較於asm.js的優勢主要是涉及到效能方面。根據WebAssembly FAQ的描述：在移動裝置上，對於很大的程式碼庫，asm.js僅僅解析就需要花費20-40秒，而實驗顯示WebAssembly的載入速度比asm.js快了20倍，這主要是因為相比解析 asm.js 程式碼，JavaScript 引擎破譯二進位制格式的速度要快得多。

主流的瀏覽器目前均支援webAssembly。

  • Safari 支援 WebAssembly的第一個版本是11
  • Edge 支援 WebAssembly的第一個版本是16
  • Firefox 支援 WebAssembly的第一個版本是 52
  • chrome 支援 WebAssembly的第一個版本是 57

使用WebAssembly，我們可以在瀏覽器中執行一些高效能、低階別的程式語言，可用它將大型的C和C++程式碼庫比如遊戲、物理引擎甚至是桌面應用程式匯入Web平臺。

開發前準備工作（MAC系統）

1.安裝 cmake brew install cmake

2.安裝 pyhton brew insatll python

3.安裝 Emscripten (調整下電腦的休眠時間，不要讓電腦進入休眠，安裝時間較長)

安裝步驟如下：

1

執行 source ./emsdkenv.sh，並將shell中的內容新增到環境變數中(~/.bashprofile):

2

執行： source ~/.bash_profile

4.安裝 WABT（將.wast檔案轉成 .wasm檔案）3

5.瀏覽器設定

4

如果瀏覽器太舊，請更新瀏覽器，或者安裝激進版瀏覽器來體驗新技術。

6.一個本地web伺服器.

Emscripten，它基於 LLVM ，可以將 C/C++ 編譯成 asm.js，使用 WASM 標誌也可以直接生成 WebAssembly 二進位制檔案（字尾是 .wasm）

642webassembly 的那些事

注：emcc 在 1.37 以上版本才支援直接生成 wasm 檔案

Binaryen 是一套更為全面的工具鏈，是用C++編寫成用於WebAssembly的編譯器和工具鏈基礎結構庫。WebAssembly是二進位制格式（Binary Format）並且和Emscripten整合，因此該工具以Binary和Emscript-en的末尾合併命名為Binaryen。它旨在使編譯WebAssembly容易、快速、有效。

643

 

  • wasm-as：將WebAssembly由文字格式編譯成二進位制格式；
  • wasm-dis：將二進位制格式的WebAssembly反編譯成文字格式；
  • asm2wasm：將asm.js編譯到WebAssembly文字格式，使用Emscripten的asm優化器；
  • s2wasm：在LLVM中開發，由新WebAssembly後端產生的.s格式的編譯器；
  • wasm.js：包含編譯為JavaScript的Binaryen元件，包括直譯器、asm2wasm、S表示式解析器等。

WABT工具包支援將二進位制WebAssembly格式轉換為可讀的文字格式。其中wasm2wast命令列工具可以將WebAssembly二進位制檔案轉換為可讀的S表示式文字檔案。而wast2wasm命令列工具則執行完全相反的過程。

  • wat2wasm: webAssembly文字格式轉換為webAssembly二進位制格式（.wast 到 .wasm）
  • wasm2wat: 將WebAssembly二進位制檔案轉換為可讀的S表示式文字檔案(.wat)
  • wasm-objdump: print information about a wasm binary. Similiar to objdump.
  • wasm-interp: 基於堆疊式直譯器解碼和執行webAssembly二進位制檔案
  • wat-desugar: parse .wat text form as supported by the spec interpreter
  • wasm-link: simple linker for merging multiple wasm files.
  • wasm2c: 將webAssembly二進位制檔案轉換為C的原始檔

webAssembly的方法

webAssembly.validate

webAssembly.validate() 方法驗證給定的二進位制程式碼的 typed array 是否是合法的wasm module.返回布林值。6

使用

7

webAssembly.Module

WebAssembly.Module() 建構函式可以用來同步編譯給定的 WebAssembly 二進位制程式碼。不過，獲取 Module 物件的主要方法是通過非同步編譯函式，如 WebAssembly.compile()，或者是通過 IndexedDB 讀取 Module 物件.8

引數： 一個包含你想編譯的wasm模組二進位制程式碼的 typed array(型別陣列) or ArrayBuffer(陣列緩衝區).

重要提示：由於大型模組的編譯可能很消耗資源，開發人員只有在絕對需要同步編譯時，才使用 Module() 建構函式；其他情況下，應該使用非同步 WebAssembly.compile() 方法。

webAssembly.compile

WebAssembly.compile() 方法編譯WebAssembly二進位制程式碼到一個WebAssembly.Module 物件。9

webAssembly.Instance

WebAssembly.Instance例項物件是有狀態，可執行的 WebAssembly.Module例項。例項中包含了所有可以被 JavaScript呼叫的WebAssembly 程式碼匯出的函式。

重要提示：由於大型模組的例項化可能很消耗資源，開發人員只有在絕對需要同步編譯時，才使用 Instance() 建構函式；其他情況下，應該使用非同步 WebAssembly.instantiate()方法。

webassembly 的那些事

  • module: 需要被例項化的webAssembly module
  • importObject: 需要匯入的變數

webAssembly.instantiate11

webAssembly.Memory

當 WebAssembly 模組被例項化時，它需要一個 memory 物件。你可以建立一個新的WebAssembly.Memory並傳遞該物件。如果沒有建立 memory 物件，在模組例項化的時候將會自動建立，並且傳遞給例項。12

memoryDescriptor (object)

  • initial
  • maximum 可選

webAssembly.Table13

tableDescriptor (object)

  • element，當前只支援一個值。 ‘anyfunc’
  • initial, WebAssembly Table的初始元素數
  • maximum(可選)， 允許的最大元素數

webAssembly使用

WebAssembly 與其他的組合語言不一樣，它不依賴於具體的物理機器。可以抽象地理解成它是概念機器的機器語言，而不是實際的物理機器的機器語言。瀏覽器把 WebAssembly 下載下來後，可以迅速地將其轉換成機器彙編程式碼。

644

快速體驗webAssembly

14

使用C/C++

hello.c

15

編譯：

16

  • -s WASM=1 — 指定我們想要的wasm輸出形式。如果我們不指定這個選項，Emscripten預設將只會生成asm.js。
  • -o hello.html — 指定這個選項將會生成HTML頁面來執行我們的程式碼，並且會生成wasm模組以及編譯和例項化wasim模組所需要的“膠水”js程式碼，這樣我們就可以直接在web環境中使用了。

編譯後645

 

  1. 二進位制的wasm模組程式碼 (hello.wasm)
  2. 一個包含了用來在原生C函式和JavaScript/wasm之間轉換的膠水程式碼的JavaScript檔案 (hello.js)
  3. 一個用來載入，編譯，例項化你的wasm程式碼並且將它輸出在瀏覽器顯示上的一個HTML檔案 (hello.html)

呼叫C++中的方法

hello.c

17

如果想呼叫hello2.c中的myFunction方法，則需要將ccall方法從Moudule匯出。使用下面的編譯命令：18

  • htmltemplate/shellminimal.html 指定為HTML模板。
  • -s ‘EXTRAEXPORTEDRUNTIME_METHODS=[“ccall”]’ 從Module中匯出 ccall

將 ccall 方法匯出之後，就可以使用 Module.ccall來呼叫C++中的函式了。19

更直觀的例子

上面的例子中，編譯後即可直接執行。但是生成的程式碼體積較大，不容易看懂具體做了什麼。因此下面提供一個更直觀的例子。

math.c20

emcc math.c-Os-s WASM=1-s SIDE_MODULE=1-o math.wasm

-s SIDE_MODULE=1 直接由C生成wasm檔案

目前只有一種方式能呼叫 wasm 裡的提供介面，那就是：用 javascript ！

編寫載入函式(loader)21

完成了上邊的操作，就可以直接使用 loadWebAssembly 這個方法載入 wasm 檔案了，它相當於是一個 wasm-loader ；返回值是一個 Promise.webassembly 的那些事

更完善的loader23

ArrayBuffer 做了兩件事情，一件是做 WebAssembly 的記憶體，另外一件是做 JavaScript 的物件。

  1. 它使 JS 和 WebAssembly 之間傳遞內容更方便。
  2. 使記憶體管理更安全。

這個 loadWebAssembly 函式還接受第二個引數，表示要傳遞給 wasm 的變數，在初始化 WebAssembly 例項的時候，可以把一些介面傳遞給 wasm 程式碼。

asm.js

asm.js 是 javascript 的子集，是一種語法。用了很多底層語法來標註資料型別，目的是提高 javascript 的執行效率，本身就是作為 C/C++ 編譯的目標設計的（不是給人寫的）。 WebAssembly 借鑑了這個思路，做的更徹底一些，直接跳過 javascript ，設計了一套新的平臺指令。

目前只有 asm.js 才能轉成 wasm，普通 javascript 是不行的。雖然 Emscripten 能生成 asm.js 和 wasm ，但是卻不能把 asm.js 轉成 wasm 。想要把 asm.js 編譯成 WebAssembly，就要用到他們官方提供的 Binaryen 和 WABT (WebAssembly Binary Toolkit) 工具。24

Rust編譯為webAssembly

1.安裝Rustup

Rustup是一個命令列應用，能夠下載並在不同版本的Rust工具鏈中進行切換25

cargo可以將整個工程編譯為wasm，首先使用cargo建立工程：

cargonewproject

下一步，把下面的程式碼加到 Cargo.toml 中26

2.demo：https://github.com/jakedeichert/wasm-astar

編譯:

cargo+nightly build--target wasm32-unknown-unknown--release

編譯出來的wasm大小為82Kb,使用wasm-gc壓縮 small-wasm_astar.wasm 的大小為 67Kb

wasm-gc wasm_astar.wasm small-wasm_astar.wasm

 

646

為什麼WebAssembly更快

JS 引擎在圖中各個部分所花的時間取決於頁面所用的 JavaScript 程式碼。圖表中的比例並不代表真實情況下的確切比例情況。

 

647

  • Parse: 把原始碼變成直譯器可以執行的程式碼所花的時間；
  • Compiling + optimizing: 基線編譯器和優化編譯器花的時間;
  • Re-optimize: 當 JIT 發現優化假設錯誤，丟棄優化程式碼所花的時間。
  • Execut：執行程式碼的時間
  • Garbage collection： 垃圾回收，清理記憶體的時間

檔案獲取：

WebAssembly比JS的壓縮了更高，所以檔案獲取更快。

解析：

到達瀏覽器時，JS原始碼被解析成了抽象語法樹，瀏覽器採用懶載入的方式進行，只解析真正需要的部分，，而對於瀏覽器暫時不需要的函式只保留它的樁，解析過後 AST （抽象語法樹）就變成了中間程式碼（叫做位元組碼），提供給 JS 引擎編譯。

而WebAssembly不需要這種轉換，因為它本身就是中間程式碼，它要做的只是解碼並且檢查確認程式碼沒有錯誤即可。

648

編譯和優化

JavaScript 是在程式碼的執行階段編譯的。因為它是弱型別語言，當變數型別發生變化時，同樣的程式碼會被編譯成不同版本。

不同瀏覽器處理 WebAssembly 的編譯過程也不同。不論哪種方式，WebAssembly 都更貼近機器碼，所以它更快.

  1. 在編譯優化程式碼之前，它不需要提前執行程式碼以知道變數都是什麼型別。
  2. 編譯器不需要對同樣的程式碼做不同版本的編譯。
  3. 很多優化在 LLVM 階段就已經做完了，所以在編譯和優化的時候沒有太多的優化需要做。

649

重優化

JS的程式碼由於型別的不確定性，有些情況下，JIT會返回進行 “拋棄優化程式碼重優化”過程。

而WebAssembly中，型別都是確定了的，因為沒有重優化階段。

執行

WebAssembly 就是為了編譯器而設計的，開發人員不直接對其進行程式設計，這樣就使得 WebAssembly 專注於提供更加理想的指令給機器。

執行效率方面，不同的程式碼功能有不同的效果，一般來講執行效率會提高 10% – 800%。

650

垃圾回收

WebAssembly不支援垃圾回收，記憶體操作需要手動控制，因此WebAssembly沒有垃圾回收。

應用

WebAssembly 更適合用於寫模組，承接各種複雜的計算，如影像處理、3D運算、語音識別、視音訊編碼解碼這種工作，主體程式還是要用 javascript 來寫的。

未來功能

  • 直接操作DOM
  • 支援多資料（SIMD）：SIMD的使用可以獲取大的資料結構，例如不同數目的向量，並且同時將相同的指令應用於不同的部分。這樣，它可以大大加快各種複雜計算的遊戲或VR的執行速度。
  • ES6模組整合：瀏覽器目前正在新增對使用script標籤載入JavaScript模組的支援。 新增此功能後，即使URL指向WebAssembly模組，

相關文章