这里定义了 add 方法，不过除此以外还包含了很多其他信息，比如 imports，这其实是要被下一个环节（linking）所消费的

第三步：Linking

一般来说，连接器的作用是将多个 object 文件连接成一个可执行的文件。

LLVM 中的连接器叫做 lld，根据编译目标不同存在多个 lld，我们这里要用的是 wasm-ld

这里我们会得到最终的 wasm 产物，add.wasm

第四步：运行 wasm

我们新建一个 html 文件来运行 wasm

上面的过程略显复杂，这是为了让我们更好的理解这其中发生了什么。其实我们可以一步完成这些动作

我们可以通过 wasm2wat（上面提到的 wabt 中已经包含了） 工具来看下 wasm 的 S expression 格式长什么样

S expression 看起来舒服多了，我们可以看到一些信息，有方法定义，有本地变量，有导出语句。不过你可能会发现就一个非常简单的 add 方法，居然需要这么多行指令，这是因为我们还没有开启优化。

大小优化

在这里其实 link-time optimization（连接优化）并没有起到作用，因为我们这里只有一个文件，在文件多的时候，这会起到很好的优化效果。

优化之后，我们发现文件变小了

POSIX syscall

到目前为止，我们都很顺利。不过一旦在 C 代码中使用了 libc，事情就会变得非常麻烦。

这是因为大多数 libc 都是为 POSIX 环境开发的，它们通过调用 kernel 实现了很多 syscall，但是在 javascript 中我们并没有 kernel 接口，为了让这些 libc 在 wasm 中能够运行，我们就必须通过 javascript 来实现这些 POSIX syscall，这个工作量非常大，非常困难。不过好在 emscripten 已经帮我们做了这些事情，更加细节的可以去https://emscripten.org/了解。

内存模型

在了解 js 和 wasm 之间如何传递值之前，我们先了解一下它的内存模型。

如果你使用了基于 LLVM IR 的方式来编译 wasm，那么 wasm 的内存分段方式是由 llvm-ld 决定的。它是一段线性内存

wasm memory layout

我们可以看到，先是栈，后面是堆，并且栈从高位往低位生长，堆从低位往高位生长。之所以这样设计是因为 wasm 的内存是可以在运行时动态增长的。

从图中我们还可以看出栈的大小是固定的（编译期确定，可以通过编译参数修改-Wl,-z,stack-size=$[8 * 1024 * 1024]），大小为：__heap_base - __data_end，这两个值可以从上面的 wat 格式中找到。

内存分配器

wasm 的堆内存是可以一直增长直到最大值的。但是如果我们只管使用，不管回收，那么很快就会用完。所以我们需要一个内存分配器，很多编译工具都自带了内存分配器，在开源中也有很多自己实现的内存分配器，它们都有各自的利弊，比如 wee_alloc ，它只有大约 1k 大小，但是它会慢上一些。

值传递

wasm 的内存是 wasm 模块初始化时在 js 侧分配的一块共享内存，两者都可以用这段共享内存，听起来很美好，零 copy，但是没有这么简单。

因为在 wasm 中导入导出的函数参数只能是数字，如果要传入 js 的复杂对象，就需要借助 wasm 内存分配器。

大概方法就是先 malloc 一块内存（wasm 代码实现）并返回它的指针，然后我们使用 TypedArray 去为这块内存填充 bytes，然后将指针传递到 wasm 方法中。举个例子：

我们可以看到 js 的值在传入 wasm 的时候，先需要在共享内存中申请一块内存，然后将 js 的值序列化成 TypedArray 写入这块内存，wasm 中根据指针取到这块内存之后，再反序列化成自己想要的数据结构。

这是一个序列化 -> copy 进内存 -> 读取内存 -> 反序列化的过程。如果在 wasm 中要把一个值传递出来也是同样的过程。

这个过程麻烦且耗时，因为语言之间的数据结构并不互通，如何将两种语言中的数据结构进行互相转换是一个难题。通常的做法是让两个语言之间使用一块共享内存，然后让它们之间按照同样的内存布局来写入和读取，但是这么做的前提是数据必须是可被序列化的，如果我们的数据无法被序列化，可能就需要其他的手段了。

我这里提供一个思路：拿 DOM Event 举例，在 wasm 中创建一个和 DOM Event 映射的对象（并不是真的 DOM Event），返回它的指针，然后在 js 侧新建一个 DOM Event 实例并和这个指针建立映射关系，后续对这个 wasm 对象的所有操作，都通过其映射对象进行。这其实有点类似 binding 的实现过程。

总结

看到这里，我们应该知道在将复杂应用编译到 wasm 中的时候，性能不一定能够得到提升，反而有可能下降，这需要合理的去评估你的应用是否真的需要 wasm 去提升性能，如果 wasm 确实有帮助，那么要仔细考虑如何去设计 js 和 wasm 中的数据传递以及一些其他的优化点等等。

阿里云开发者社区，千万开发者的选择

阿里云开发者社区，百万精品技术内容、千节免费系统课程、丰富的体验场景、活跃的社群活动、行业专家分享交流，欢迎点击【阅读原文】加入我们。