什麼是 WebAssembly?

初次聽到 WebAssembly 大約是在前年年初左右,當時並沒有詳細了解其內容,有些人認為它是用來取代 JavaScript,其實不然...

圖片取自:https://kripken.github.io/talks/wasm.html#/

前言

第一次聽到 WebAssembly 這麼名詞的時候,大約是 2015 年左右,但當時並不以為意,也沒有詳細的探究其內容,有人說,WebAssembly 是用來取代 JavaScript?但我印象中似乎不是這樣。我們重新找些資料,並探討看看究竟 WebAssembly 是什麼神奇的技術。

 

關於 WebAssembly

第一次聽到 WebAssembly 這個名詞大約是在 2015 年左右,我記得是是在 iTHome 上面看到的,記得是一篇報導,於是搜尋了一下,好家在,這篇新聞還在。

從報導中可以清楚知道,這是由 Chrome、Edge 與 Firefox 三大瀏覽器所共同推動的,新的格式標準,目的並不是要取代 JavaScript ,而是要讓 JavaScript 更強,且執行速度更快,甚至提升至 20倍左右。

 

什麼是 WebAssembly?

它是一種新型的二進位碼,可以在瀏覽器中運行,但因為它是被設計為低階語言所以不是像 JavaScript 可直接撰寫,目前是以 C/C++/Rust 為主要編一部標。
這對目前的 Web 平台會產生極大程度影響,因為原本 JavaScript 所做不到的事情都可以用 WebAssembly 來完成它,WebAssembly 甚至可以與 Node.js 結合,這其實就是將將 WebAssembly 所提供的功能開放為 JavaScript 函數供呼叫使用。

 

WebAssembly 的目標?

1. 高速執行的原生碼,且具備高度可攜性
2. 雖然是一種低階語言,但也不是不能編寫 (但詳細規格還沒確定)
3. 為確保安全,與其他瀏覽器程式碼一樣,它會在自己的沙箱中執行,以確保有自己的(權限/安全性)策略
4. 如同現有網路技術一樣,不破懷現有規範,兩者可同時並行,也維持相容性。

 

為什麼發展 WebAssembly?

這邊其實說明另一個重點,就是 WebAssembly 並不是用來取代 JavaScript,因為現今 JavaScript 已經強大到足以解決目前遇到的所有問題,所以 WebAssembly 與 JavaScript 完全沒有誰取代誰的問題,這部分需要澄清的,但是,當我們使用 JavaScript 進行一些 3D 遊戲、虛擬實境 的撰寫的時候,幾萬行的 JavaScript 常讓開發人員望之卻步,而 WebAssembly 就是要來解決這樣的問題。

所以在未來的世界中,WebAssembly 與 JavaScript 可能會是共存的情境,下面的例子是說明透過 WebAssembly 開放出來的 JavaScript API 來呼叫的一個情境。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly

 

如何在我們的 Web 應用程式裡使用 WebAssembly?

從前棉文章連結中可以知道,要在網頁中加載 WebAssembly 可使用 WebAssembly.instantiate() 實例化 WebAssembly 要提供出來的 API,且 WebAssembly 計畫使用類似如 ES6 標準的的 ES2015 採用模板方式使用如:

<script type="module"></script>

的方式加載 WebAssembly 在你的網頁應用程式之中,目前 C++ 已經支援被編譯成 WebAssembly ,您可以使用 Emscripten 來移植C / C++ 應用程式成為 WebAssembly。

 

如何編寫 WebAssembly?

目前有許多工具支援撰寫 WebAssembly,如:

  • WABT - The WebAssembly Binary Toolkit
  • Binaryen - Compiler and toolchain infrastructure

舉例來說,一個 C++ 方法如下:

圖取自:http://blog.techbridge.cc/2017/06/17/webassembly-js-future/

 

若編譯成 wasm 會長成如下(該文章作者為以 Hex 呈現其內容):

圖取自:http://blog.techbridge.cc/2017/06/17/webassembly-js-future/

 

但 Hex 無法直接編輯,所以通常會將上面的 .wasm 轉成以種存文字格式 .wast 如下:

圖取自:http://blog.techbridge.cc/2017/06/17/webassembly-js-future/

 

上面的 module 就是 WebAssembly 中一個可載入、可執行的最小單位程式,在 runtime 載入後可以產生 Instance 來執行,而這個 module 也朝著與 ES6 modules 整合的方向,也就是說以後能透過

<script src="abc.wasm" type="module" />

的方式載入你需要在葉面上使用的 WebAssembly。

相關工具說明可參考:

https://github.com/guybedford/wasm-intro/blob/master/4-reading-wasm-memory/test.html#L4

https://github.com/WebAssembly/design

WABT 與 Binaryen:

http://webassembly.org/getting-started/advanced-tools/

 

結語:

這是一個蠻讓人期待的技術,對於大量使用 JavaScript 開發應用系統或是遊戲開發商非常有利,而且如果沒記錯,目前 Chrome 版號 57 以上就支援 WebAssembly 了,有興趣的讀者可下載 Emscripten SDK 來試玩看看。

 

參考資料:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly

http://webassembly.org/docs/modules/#integration-with-es6-modules

https://github.com/WebAssembly/wabt

http://kripken.github.io/emscripten-site/

http://webassembly.org/docs/non-web/

https://kripken.github.io/talks/wasm.html#/2

http://www.letustweak.com/news/webassembly-an-interoperable-standard-for-the-web/

http://blog.techbridge.cc/2017/06/17/webassembly-js-future/

https://github.com/guybedford/wasm-intro/blob/master/4-reading-wasm-memory/test.html#L4

http://webassembly.org/getting-started/advanced-tools/

https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts

 

 


 

簽名:

學習是一趟奇妙的旅程

這當中,有辛苦、有心酸、也有成果。有時也會有瓶頸。要能夠繼續勇往直前就必須保有一顆最熱誠的心。

軟體開發之路(FB 社團)https://www.facebook.com/groups/361804473860062/

Gelis 程式設計訓練營(粉絲團)https://www.facebook.com/gelis.dev.learning/


 

如果文章對您有用,幫我點一下讚,或是點一下『我要推薦,這會讓我更有動力的為各位讀者撰寫下一篇文章。

非常謝謝各位的支持與愛護,小弟在此位各位說聲謝謝!!! ^_^