导读：
JavaScript存在什么问题
webAssembly是什么
WebAssembly是如何工作的
WebAssembly能解决什么问题
WebAssembly当前的局限性
demo 案例
JavaScript存在什么问题
JavaScript语言特点：解释执行（动态语言）、弱类型
JavaScript执行过程如下：解析—编译/编译优化—优化—执行—垃圾回收
对比静态语言执行过程：解码-编译/编译优化-执行
结论：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、指令集
参考上图，计算机的主要架构如上。最底层是 CPU 的指令集，主要分为复杂指令集和简单指令集。复杂指令集是 x86、x64(也叫 x86-64, amd64) 两种架构，专利在 Intel 和 AMD 两家公司手里， 该架构 CPU 主要是 Intel 和 AMD 两家公司，这种 CPU 常用在 PC 机上，包括 Windows，macOS 和 Linux。简单指令集是 arm 一种架构，专利在 ARM 公司手里，该架构 CPU 主要有高通、三星、苹果、华为海思、联发科等公司。这种 CPU 常用在手机上，包括安卓和苹果。
这里是一个c++阶乘函数编译为Wasm指令的示例（准确的说WAT并不是指令，而是WebAssembly 可读文本格式）
这里的每一条指令都是指令集规定的内容，规定了操作码、操作数以及具体的功能。当然这里用WAT格式展示，主要是为了我们人类来读写。实际存储文件(Wasm)还是转成 的0,1 序列。上边每个单词都会有一个数字相对应
WebAssembly是如何工作的
1、浏览器执行Wasm过程：加载-编译-实例化-调用（执行）
2、c语言转Wasm在线工具--WasmFiddle
3、c++语言转Wasm在线工具--WasmExplorer
WebAssembly能解决什么问题
1、web端
- 使用 Wasm 完全重写现有框架使用
- Wasm 重写现有框架的核心逻辑
- 使用 Wasm 配合框架增强应用的部分功能
- 使用其他语言构建 Web 前端框架
2、not in web
WebAssembly当前的局限性
1、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倍
