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)制源碼了

這段二進(jìn)制代碼, 導(dǎo)出了兩個(gè)函數(shù), add 和 square 我們在js 代碼中調(diào)用這兩個(gè)函數(shù)。
從這段代碼中,有如下幾個(gè)推論
- 可以加密web 代碼了。web代碼不再像以前js 代碼那樣,以源代碼形式直接暴露出來了。
- WebAssembly 代碼可以作為 js 的類庫引用
- WebAssembly 是二進(jìn)制代碼, 執(zhí)行效率肯定比 js 源代碼高
- 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è)推論
- WebAssebmly 目前只能用 JavaScript 調(diào)用
- 不能使用JavaScript編寫 (這意味著寫 WebAssebly 需要至少懂2門語言)
還有幾個(gè)疑惑
- 需要兩門語言, 門檻略高
- 編譯的工具鏈還非常底層, 步驟多而雜。
初步結(jié)論
- WebAssembly 不是一門語言, 是一個(gè)編譯工具
- 經(jīng)過WebAssebly 編譯的二進(jìn)制代碼,可以運(yùn)行在 瀏覽器中, 并使用JavaScript 進(jìn)行調(diào)用
- 編寫 WebAssembly 的語言, 目前有 C/C++, 以后可能會有更多 (目前還沒有找到其他語言的范例)
- WebAssembly 有一定程度的Web代碼加密作用
- 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