導(dǎo)讀：
JavaScript存在什么問題
webAssembly是什么
WebAssembly是如何工作的
WebAssembly能解決什么問題
WebAssembly當(dāng)前的局限性
demo 案例

JavaScript存在什么問題

JavaScript語言特點：解釋執(zhí)行（動態(tài)語言）、弱類型
JavaScript執(zhí)行過程如下：解析—編譯/編譯優(yōu)化—優(yōu)化—執(zhí)行—垃圾回收

js代碼執(zhí)行過程

對比靜態(tài)語言執(zhí)行過程：解碼-編譯/編譯優(yōu)化-執(zhí)行

靜態(tài)語言執(zhí)行

結(jié)論：JavaScript不適用CPU密集型和高性能應(yīng)用

webAssembly是什么

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.

WebAssembly（縮寫為 Wasm）是一種基于堆棧式虛擬機的二進(jìn)制指令集。Wasm 被設(shè)計成為一種編程語言的可移植編譯目標(biāo)，并且可以通過將其部署在 Web 平臺上，以便為客戶端及服務(wù)端應(yīng)用程序提供服務(wù)

相關(guān)概念

1、堆棧機
一個簡單的堆棧機計算模型示例如下：
一個簡單的1+2求和程序

堆棧機計算模型--計算過程

計算過程
i32.const 1  |  1
i32.const 2  |  1,2
i32.add      |  3

2、指令集

image.png

參考上圖，計算機的主要架構(gòu)如上。最底層是 CPU 的指令集，主要分為復(fù)雜指令集和簡單指令集。復(fù)雜指令集是 x86、x64(也叫 x86-64, amd64) 兩種架構(gòu)，專利在 Intel 和 AMD 兩家公司手里， 該架構(gòu) CPU 主要是 Intel 和 AMD 兩家公司，這種 CPU 常用在 PC 機上，包括 Windows，macOS 和 Linux。簡單指令集是 arm 一種架構(gòu)，專利在 ARM 公司手里，該架構(gòu) CPU 主要有高通、三星、蘋果、華為海思、聯(lián)發(fā)科等公司。這種 CPU 常用在手機上，包括安卓和蘋果。

這里是一個c++階乘函數(shù)編譯為Wasm指令的示例（準(zhǔn)確的說WAT并不是指令，而是WebAssembly 可讀文本格式）

c++/階乘函數(shù)

WAT/階乘函數(shù)

這里的每一條指令都是指令集規(guī)定的內(nèi)容，規(guī)定了操作碼、操作數(shù)以及具體的功能。當(dāng)然這里用WAT格式展示，主要是為了我們?nèi)祟悂碜x寫。實際存儲文件(Wasm)還是轉(zhuǎn)成 的0,1 序列。上邊每個單詞都會有一個數(shù)字相對應(yīng)

webAssembly的微觀世界--字節(jié)碼

webAssembly的微觀世界--字節(jié)碼

WebAssembly是如何工作的

1、瀏覽器執(zhí)行Wasm過程：加載-編譯-實例化-調(diào)用（執(zhí)行）

瀏覽器執(zhí)行Wasm過程

WebAssembly能解決什么問題

1、web端

• 使用 Wasm 完全重寫現(xiàn)有框架使用
• Wasm 重寫現(xiàn)有框架的核心邏輯
• 使用 Wasm 配合框架增強應(yīng)用的部分功能
• 使用其他語言構(gòu)建 Web 前端框架

2、not in web

單一端運行程序

跨端運行

WebAssembly當(dāng)前的局限性

1、web兼容度

web兼容情況

2、無法直接引用 DOM
3、復(fù)雜數(shù)據(jù)類型需要進(jìn)行編解碼

demo 案例

1、eBay 的條形碼掃描
eBay 在原生應(yīng)用中有專門的 C++ 庫用于條形碼的掃描，在 H5 中利用開源 JavaScript 庫 BarcodeReader 做了一個帶條形碼掃描功能的Web版本。 問題是它只有在 20％ 的時間表現(xiàn)良好。 剩余的 80％ 的時間運行非常緩慢，準(zhǔn)確率也不高。最終的解決方案是通過 Wasm ，將原有的 c++ 庫引入，以及業(yè)界十分有名的、基于 C 語言編寫的開源條形碼掃描庫 ZBar 引入，再加上原本的 js 庫，三者協(xié)助，最終識別率達(dá)到了 100%。
技術(shù)方案設(shè)計如下圖所示。

競爭取勝

產(chǎn)品上線后的最終效果如下圖所示。

功能效果圖

更詳細(xì)的過程可以參考 WebAssembly在eBay的實踐：速度提升50倍