WebAssembly--浏览器第二语言

导读：
JavaScript存在什么问题
webAssembly是什么
WebAssembly是如何工作的
WebAssembly能解决什么问题
WebAssembly当前的局限性
demo 案例

JavaScript存在什么问题

JavaScript语言特点：解释执行（动态语言）、弱类型
JavaScript执行过程如下：解析—编译/编译优化—优化—执行—垃圾回收

js代码执行过程

对比静态语言执行过程：解码-编译/编译优化-执行

静态语言执行

结论：JavaScript不适用CPU密集型和高性能应用

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）是一种基于堆栈式虚拟机的二进制指令集。Wasm 被设计成为一种编程语言的可移植编译目标，并且可以通过将其部署在 Web 平台上，以便为客户端及服务端应用程序提供服务

相关概念

1、堆栈机
一个简单的堆栈机计算模型示例如下：
一个简单的1+2求和程序

堆栈机计算模型--计算过程

计算过程
i32.const 1  |  1
i32.const 2  |  1,2
i32.add      |  3

2、指令集

image.png

参考上图，计算机的主要架构如上。最底层是 CPU 的指令集，主要分为复杂指令集和简单指令集。复杂指令集是 x86、x64(也叫 x86-64, amd64) 两种架构，专利在 Intel 和 AMD 两家公司手里，该架构 CPU 主要是 Intel 和 AMD 两家公司，这种 CPU 常用在 PC 机上，包括 Windows，macOS 和 Linux。简单指令集是 arm 一种架构，专利在 ARM 公司手里，该架构 CPU 主要有高通、三星、苹果、华为海思、联发科等公司。这种 CPU 常用在手机上，包括安卓和苹果。

这里是一个c++阶乘函数编译为Wasm指令的示例（准确的说WAT并不是指令，而是WebAssembly 可读文本格式）

c++/阶乘函数

WAT/阶乘函数

这里的每一条指令都是指令集规定的内容，规定了操作码、操作数以及具体的功能。当然这里用WAT格式展示，主要是为了我们人类来读写。实际存储文件(Wasm)还是转成的0,1 序列。上边每个单词都会有一个数字相对应

webAssembly的微观世界--字节码

WebAssembly是如何工作的

1、浏览器执行Wasm过程：加载-编译-实例化-调用（执行）

浏览器执行Wasm过程

2、c语言转Wasm在线工具--WasmFiddle
3、c++语言转Wasm在线工具--WasmExplorer

WebAssembly能解决什么问题

1、web端

使用 Wasm 完全重写现有框架使用
Wasm 重写现有框架的核心逻辑
使用 Wasm 配合框架增强应用的部分功能
使用其他语言构建 Web 前端框架

2、not in web

单一端运行程序

跨端运行

WebAssembly当前的局限性

1、web兼容度

web兼容情况

2、无法直接引用 DOM
3、复杂数据类型需要进行编解码

demo 案例

1、eBay 的条形码扫描
eBay 在原生应用中有专门的 C++ 库用于条形码的扫描，在 H5 中利用开源 JavaScript 库 BarcodeReader 做了一个带条形码扫描功能的Web版本。问题是它只有在 20％的时间表现良好。剩余的 80％的时间运行非常缓慢，准确率也不高。最终的解决方案是通过 Wasm ，将原有的 c++ 库引入，以及业界十分有名的、基于 C 语言编写的开源条形码扫描库 ZBar 引入，再加上原本的 js 库，三者协助，最终识别率达到了 100%。
技术方案设计如下图所示。

竞争取胜

产品上线后的最终效果如下图所示。

功能效果图

产品在上线使用了一段时间后，eBay 技术团队对应用的条形码扫描情况进行了统计，结果发现有 53% 的成功扫描来自于 ZBar；34% 来自于自研的 C++ 库。剩下的 13% 则来自于第三方的 JavaScript 库实现。可见，其中通过 Wasm 实现得到的扫描结果占据了总成功次数的 87%。

更详细的过程可以参考 WebAssembly在eBay的实践：速度提升50倍