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

在线编译

https://wasdk.github.io/WasmFiddle/

https://anonyco.github.io/WasmFiddlePlusPlus/

https://mbebenita.github.io/WasmExplorer/ 

目前 WebAssembly 的下载、编译和执行

都由 JavaScript 控制

未来可以通过 <script type="module"> 形式直接加载 WASM 模块

Rust 简介

静态类型、强类型、编译型

使用场景和 C/C++ 类似，是种系统编程语言

Mozilla 主导开发

社区活跃

文档齐全

迭代快速

值得入坑

快速类比

WASM 仅支持浮点型和整型数据

但是通过内存共享，我们可以以另一种方式支持更多的数据类型

但是操作内存的代码很难理解也不好写

所以这里没有例子展示

wasm-bingen

bingen 指 bind 和 generate

使得使用 Rust 开发 WebAssembly 应用的时候可以支持 String、Object、Class 等复杂的数据类型

1.对 Rust 中函数的数据类型进行合适的转换使其能够与JavaScript 对接

2.生成 JavaScript 代码，将 JavaScript 中不受支持的类型转换成内存中的指针来达到传递数据的目的

3.将WASM module包装成一个可以直接引入的 JavaScript module

Code Review