WA SM 不会到入门
@豆丁 / 稿定平台组
WA SM 从听过到略懂
@豆丁 / 稿定平台组
目录
WASM 简介
WASM 使用流程
使用 Rust 做一个 Todo
少废话，先看东西
WASM 是什么？
是一种能直接被浏览器执行的二进制代码格式
可以由C/C++、Rust等语言编译而来
WASM 不是一种语言！
WASM 也有可读的文本格式
WASM有什么特点呢？
二进制格式，体积远小于JS的文本格式
标准化，能在任何实现了WASM的环境上运行
快！
字节码压缩率更高，下载速度更快
本身是字节码，省去 parse 步骤
很多优化在编译阶段就已经完成
没有垃圾回收
类型确定，不会重优化
JavaScript 的 JIT编译器会根据代码运行情况将代码编译成机器代码来提升执行性能
重优化会导致编译器抛弃之前的编译结果重新编译这会对执行性能产生影响
举个栗子
编译器很开心，把它编译成下面的形式
随后你又写了这段代码
编译器：
WASM 目前的能力？
不支持 DOM 操作，无法访问 Web API
与 JavaScript 相互调用时仅支持整数和浮点数两种数据类型
但是可以和 JavaScript 共享内存
WebAssembly.Memory
WASM 的使用步骤
Rust 编译到 WebAssembly Target
C/C++ 和 Emscripten
在线编译
目前 WebAssembly 的下载、编译和执行
都由 JavaScript 控制
未来可以通过 <script type="module"> 形式直接加载 WASM 模块
Rust 简介
静态类型、强类型、编译型
使用场景和 C/C++ 类似，是种系统编程语言
Mozilla 主导开发
社区活跃
文档齐全
迭代快速
值得入坑
| 功能 | Rust | JavaScript |
| 版本管理 | rustup | nvm（非官方） |
| 执行/编译 代码 | rustc | node |
| 依赖管理 | cargo | npm / yarn |
| 依赖记录 | Cargo.toml | package.json |
| 锁定依赖版本 | Cargo.lock | package-lock.json yarn.lock |
快速类比
WASM 仅支持浮点型和整型数据
但是通过内存共享，我们可以以另一种方式支持更多的数据类型
但是操作内存的代码很难理解也不好写
所以这里没有例子展示
wasm-bingen
bingen 指 bind 和 generate
使得使用 Rust 开发 WebAssembly 应用的时候可以支持 String、Object、Class 等复杂的数据类型
1.对 Rust 中函数的数据类型进行合适的转换使其能够与JavaScript 对接
2.生成 JavaScript 代码，将 JavaScript 中不受支持的类型转换成内存中的指针来达到传递数据的目的
3.将WASM module包装成一个可以直接引入的 JavaScript module
Code Review
