WebAssembly 學(xué)習(xí)筆記

WebAssembley 是什么

面向Web的通用二進(jìn)制和文本格式

官網(wǎng) http://webassembly.org/
從名稱中,可以看到他是一個(gè) Web字節(jié)碼技術(shù)。 現(xiàn)在運(yùn)行在web上的動態(tài)語言代碼,都是 JavaScript ,我們可以輕松看到 網(wǎng)站的源代碼。

WebAssembly 又稱為 wasm

教程

這是一篇非常好的 WebAssemably 教程
https://segmentfault.com/a/1190000008402872

本文是對這篇教程的實(shí)踐筆記, 是一個(gè)流水賬

運(yùn)行 wasm

首先需要一個(gè)支持wasm的瀏覽器, 我使用的是 黃色 Chrome (Chrome Canary)
https://www.google.com/chrome/browser/canary.html

快速體驗(yàn) WebAssembly

WebAssembly.compile(new Uint8Array(`
  00 61 73 6d  01 00 00 00  01 0c 02 60  02 7f 7f 01
  7f 60 01 7f  01 7f 03 03  02 00 01 07  10 02 03 61
  64 64 00 00  06 73 71 75  61 72 65 00  01 0a 13 02
  08 00 20 00  20 01 6a 0f  0b 08 00 20  00 20 00 6c
  0f 0b`.trim().split(/[\s\r\n]+/g).map(str => parseInt(str, 16))
)).then(module => {
  const instance = new WebAssembly.Instance(module)
  const { add, square } = instance.exports

  console.log('2 + 4 =', add(2, 4))
  console.log('3^2 =', square(3))
  console.log('(2 + 5)^2 =', square(add(2 + 5)))

})

運(yùn)行結(jié)果如下, 這一串二進(jìn)制代碼, 就是編譯好的 WebAssembly 二進(jìn)制源碼了


image.png

這段二進(jìn)制代碼, 導(dǎo)出了兩個(gè)函數(shù), add 和 square 我們在js 代碼中調(diào)用這兩個(gè)函數(shù)。

從這段代碼中,有如下幾個(gè)推論

  1. 可以加密web 代碼了。web代碼不再像以前js 代碼那樣,以源代碼形式直接暴露出來了。
  2. WebAssembly 代碼可以作為 js 的類庫引用
  3. WebAssembly 是二進(jìn)制代碼, 執(zhí)行效率肯定比 js 源代碼高
  4. WebAssembly 不是為了取代 js , 而是為了增強(qiáng) js 運(yùn)行效率, 是js 的一個(gè)強(qiáng)有力的補(bǔ)充

如何編寫WebAssembly

編寫語言, 支持 C/C++

以C 語言為例,

// math.c

int add (int x, int y) {
  return x + y;
}

int square (int x) {
  return x * x;
}

然后執(zhí)行 emcc math.c -Os -s WASM=1 -s SIDE_MODULE=1 -o math.wasm 就可以生成 wasm 文件了。 也就是我們在上面看到的一串二進(jìn)制代碼。

這里,我有幾個(gè)推論

  1. WebAssebmly 目前只能用 JavaScript 調(diào)用
  2. 不能使用JavaScript編寫 (這意味著寫 WebAssebly 需要至少懂2門語言)

還有幾個(gè)疑惑

  1. 需要兩門語言, 門檻略高
  2. 編譯的工具鏈還非常底層, 步驟多而雜。

初步結(jié)論

  1. WebAssembly 不是一門語言, 是一個(gè)編譯工具
  2. 經(jīng)過WebAssebly 編譯的二進(jìn)制代碼,可以運(yùn)行在 瀏覽器中, 并使用JavaScript 進(jìn)行調(diào)用
  3. 編寫 WebAssembly 的語言, 目前有 C/C++, 以后可能會有更多 (目前還沒有找到其他語言的范例)
  4. WebAssembly 有一定程度的Web代碼加密作用
  5. WebAssebly 還處在初期開發(fā)階段, 非常的不成熟,在最新的測試版瀏覽器中才有支持,工具鏈?zhǔn)褂靡蚕喈?dāng)繁瑣。

參考資料

http://www.infoq.com/cn/news/2015/06/webassembly-wasm
http://www.infoq.com/cn/news/2017/07/WebAssembly-solve-JavaScript

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • WebAssembly 系列(一)生動形象地介紹 WebAssemblyWebAssembly 系列(二)Java...
    合肥黑閱讀 7,712評論 0 9
  • TITLE: 編程語言亂燉 碼農(nóng)最大的煩惱——編程語言太多。不是我不學(xué)習(xí),這世界變化快! 有時(shí)候還是蠻懷念十幾、二...
    碼園老農(nóng)閱讀 5,593評論 2 35
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語法,類相關(guān)的語法,內(nèi)部類的語法,繼承相關(guān)的語法,異常的語法,線程的語...
    子非魚_t_閱讀 34,692評論 18 399
  • 囫圇吞棗完《白鹿原》,有些地方?jīng)]有來得及推敲。只是在疑惑結(jié)局為什么是這樣?不是一切皆好,不是好人長命。貌似小說的結(jié)...
    不驚雨閱讀 170評論 0 1
  • “風(fēng)雨送春歸,飛雪迎春到”,冬去春來,萬物蘇醒,人的陽氣也跟著上升,所以身體會出現(xiàn)春燥的情況,此時(shí)非常適合刮痧,而...

友情鏈接更多精彩內(nèi)容