真实世界的 WebAssembly
Posted 刘祺
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了真实世界的 WebAssembly 相关的知识，希望对你有一定的参考价值。
本作品采用知识共享署名-非商业性使用 4.0 国际许可协议(https://creativecommons.org/licenses/by-nc/4.0/deed.zh)进行许可。
1.2 wasm 二进制格式及它的加载与运行
wasm 格式实际上是一个二进制格式，也就是人类不可读或者说很难阅读的一个格式。不过不用担心，它可以通过我们在1.1节配置的工具包和一个人类可读的文本格式互相转换，文本格式为 wat，早期这个格式称之为 wast。如果您遇到了 wast 这种说法也不要见怪。
那么既然它们两个是等价的为什么要转换成二进制格式呢？这个问题的答案是显然的，因为二进制的文件小一些，运行起来也要比文本格式的快。
就一个测试用的176字节的 wat 文件，转换为 wasm 格式后仅有41字节（实际上 wasm 中是字节码）。这样算起来真是小了很多呢。
那么 wasm 怎么加载并运行呢？我们这里给出一个它在页面上的运行方式。首先您需要明确的是 wasm 到目前为止还没有一个内置方法进行引入。也就是说我们不得不使用 javascript 做其中的衔接，这里有一个写好了的衔接源码您可以直接下载它：https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js 只要您在页面中引入这段源码就可以通过其中的函数顺利的加载并运行 wasm 了。这样看来还是挺方便的。当然就今后 wasm 发展来看，以后如果有了内置方法进行引入还会更加方便。
那么我们现在来开始我们的第一个例子，新建一个 wat 文件，并输入以下代码。譬如您将其保存为 demo.wat
(module (func $add (param $lhs i32) (param $rhs i32) (result i32) get_local $lhs get_local $rhs i32.add) (export "add" (func $add) ) ) |
这时请在保存处打开终端或控制台（注1）并输入以下命令：
wat2wasm demo.wat |
注1：笔者建议您在 Linux 系统下操作，这样会方便一些，如果您没有按照 Linux 系统的计算机不妨试一试使用虚拟机
您会发现在您的 wat 文件保存处生成了一个同名的 wasm 文件。这个文件要比 wat 文件小很多，我们要引入的就是这个文件。并且新建一个 html 页面并通过下面的代码将其引入。（这里展示了整个 HTML 页面的代码）
<!DOCTYPE html> <html> <head> <title>真实世界的 WebAssembly 刘祺</title> <meta charset="utf-8"/> </head> <body> <script ></script> <script> var importObject = { imports: { imported_func: function(arg) { console.log(arg); } } }; fetchAndInstantiate('1.wasm', importObject).then(function(instance) { console.log(instance.exports.add(1, 2)); }); </script> </body> </html> |
我们在浏览器中打开这个页面，并打开浏览器的控制台就会发现结果为 3。（注2）我们这里不去管我们的 wat 文件为什么是这样写的，因为我们后续都要讨论的就是这个问题。这里我们只需要了解如何引入并运行我们的 wasm 文件就可以了。
注2：如果您和笔者一样是使用的火狐浏览器，您可以按 Ctrl + Shift + K 来打开浏览器的控制台（Web 控制台）
关于封面: 一些著名的技术出版商都会以较为统一的封面设计来标识自己的系列图书，譬如 O'Reilly 的动物书、Packt 的一张照片以及 Manning 的人像画。所以笔者自己的系列就以知名艺术品作为封面了，所以下回去博物馆就不要只围着《蒙娜丽莎》了。同时笔者也希望大家能够在关注技术的同时，多留意生活中的美。
以上是关于真实世界的 WebAssembly 的主要内容，如果未能解决你的问题，请参考以下文章
探索WebAssembly实现iOS热修复/第一篇/WebAssembly快速上手