关于javascript:编译wasm-Web应用

刚学完 WebAssembly 的入门课，卖弄一点入门常识。

首先咱们晓得 wasm 是目标语言，是一种新的 V -ISA 规范，所以编写 wasm 利用，失常来说不会间接应用 WAT 可读文本格式，更不会用 wasm 字节码；而是应用其余高级语言编写源代码，通过编译后失去 wasm 利用。课程中应用了 C ++ 来编写源代码，所以这里我也用 C ++ 来编写 demo。

wasm 的运行环境次要分为两类，一类是 Web 浏览器，另一类就是 out-of-web 环境，运行于 Web 浏览器的 wasm 利用次要应用 Emscripten 来编译失去，因为它会在编译过程中，为所编译代码在 Web 平台的性能适配性进行肯定的调整。

对于性能适配性的调整，能够从上面这个例子中失去体现。

首先咱们编写一段性能简略的 C ++ 源代码：

#include <iostream>

extern "C" {
  // 避免 Name Mangling
  int add(int x, int y) {return x + y;}
}

int main(int argc, char **argv) {std::cout << add(10, 20) << std::endl;
  return 0;
}

这段代码里，申明了一个函数“add”，它的定义被搁置在“extern "C" {}”构造中，以避免函数名被 C ++ 的 Name Mangling 机制更改，从而确保在宿主环境中调用该函数时，能够用与 C ++ 源码中保持一致的函数名，来间接调用这个函数。

这段代码中还定义了主函数 main，其外部调用了 add 函数，并且通过std::cout 来将该函数的调用后果输入到stdout。

当初咱们能够用 Emscripten 这个工具集中最为重要的编译器组件 emcc，来编译这段源代码。命令如下所示：

emcc main.cc -s WASM=1 -O3 -o main.html

通过“-s”参数，为 emcc 指定了编译时选项“WASM=1”，这样 emcc 就会将输出的源代码编译为 wasm 格局指标代码，“-o”参数则指定了产出文件的格局为“.html”，这样 Emscripten 就会生成一个能够间接在浏览器中应用的 Web 利用。

这个主动生成的利用中，蕴含了 wasm 模块代码、JavaScript 代码以及 HTML 代码。

当初咱们能够尝试在本地运行这个简略的 Web 利用。首先自行筹备一个简略的 Web 服务器：

const http = require('http');
const url = require('url');
const fs = require('fs');
const path = require('path');

const PORT = 8888;
const mime = {
  "html": "text/html;charset=UTF-8",
  "wasm": "application/wasm" // 遇到 ".wasm" 格式文件的申请时，返回特定的 MIME
}

http.createServer((req, res) => {let realPath = path.join(__dirname, `.${url.parse(req.url).pathname}`);
  // 查看所拜访文件是否存在并且可读
  fs.access(realPath, fs.constants.R_OK, err => {if (err) {res.writeHead(404, { 'Content-Type': 'text/plain'});
      res.end();} else {fs.readFile(realPath, "binary", (err, file) => {if (err) {
          // 文件读取失败时返回 500
          res.writeHead(500, { 'Content-Type': 'text/plain'});
          end();} else {
          // 依据申请的文件返回相应的文件内容
          let ext = path.extname(realPath);
          ext = ext ? ext.slice(1) : 'unknow';
          let contentType = mime[ext] || 'text/plain';
          res.writeHead(200, { 'Content-Type', contentType});
          res.write(file, "binary");
          res.end();}
      });
    }
  });
}).listen(PORT);
console.log("Server is running at port:" + PORT + ".");

这段代码中最为重要的一个中央，就是对 wasm 格式文件申请的解决。

通过返回非凡的 MIME 类型“application/wasm”，咱们明确通知浏览器，这是一个 wasm 格局的文件，这样浏览器就能够容许利用应用针对 wasm 文件的“流式编译”形式，来加载和解析该文件。

当初咱们通过 8888 端口来拜访刚刚编译生成的 main.html 文件。

能够看到，Emscripten 将 C ++ 源码中应用 std::cout 将数据输入到stdout，模仿为输入到页面上指定的 textarea 区域。这就是 Emscripten 针对 Web 平台的性能适配性调整。

再持续看，Emscripten 主动生成的残缺 wasm Web 利用，不论是 js 文件还是 html 文件，体积都偏大，这是因为 Emscripten 主动生成的“胶水代码”中，蕴含有通过 JavaScript 模拟出的 POSIX 运行时环境的残缺代码，而大多数状况下，咱们不须要这些。

那怎么能够使得 Emscripten 仅生成 wasm 模块，而 js 胶水代码和 Web API 这两局部的代码由咱们本人编写呢？

答案就是调整编译时的命令行参数。那么咱们要如何去编写 JS 来调用 wasm 模块导出的函数呢？

课程里有个图像处理的例子，这里就来整个小例子。

首先编写咱们的 HTML 页面：

<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>DEMO</title>
    </head>
    <body>
        <div>
            <h1>Counter: </h1>
            <span>0</span>
            <button id="increaseButton"> 点我 +1</button>
        </div>
        <script src="index.js"></script>
    </body>
</html>

这里想要实现一个性能，点击按钮后，span 内的数字加 1，当然这个性能 JavaScript 也能做，但当初作为练习，咱们要通过调用 wasm 函数来实现。

而后就是重要的 JavaScript 代码，如下：

// index.js
document.addEventListener('DOMContentLoaded',  async () => {let response = await fetch('./index.wasm');
    let bytes = await response.arrayBuffer();
    let {instance} = await WebAssembly.instantiate(bytes);
    let {increase} = instance.exports;

    const span = document.querySelector('span');
    const button = document.querySelector('#increaseButton');
    let count = 0;
    button.addEventListener('click', () => {count = increase(count);
        span.innerText = count;
    });
});

首先，通过 fetch 获取 wasm 模块，并获取 fetch 办法返回的 Response 对象；

而后，调用 response 对象上的 arrayBuffer()办法，将内容解析为 ArrayBuffer 的模式，这个 ArrayBuffer 将作为 WebAssembly.instantiate 办法的理论调用参数；这是一个用于实例化 wasm 模块的办法。

接着，WebAssembly.instantiate 将实例化对应的 wasm 模块，咱们就能够取得模块的实例对象，在 instance 变量中，能够取得从 wasm 模块导出的所有办法。

此时，咱们就能够调用 wasm 模块的办法了，假如 instance 上有个 increase 办法，就能够这样调用。

当初，咱们编写对应的 C ++ 代码并进行编译。

// index.cc
#include <emscripten.h>

extern "C" {EMSCRIPTEN_KEEPALIVE int increase(int x) {return x+1;}
}

此处咱们须要引入<emscripten.h>，因为须要应用其中定义的宏EMSCRIPTEN_KEEPALIVE，因为这个文件中咱们不申明主函数 main，也不在文件外部调用这个 increase 函数，为了避免在编译过程中被 DCE（Dead Code Elimination）解决掉，须要应用这个宏来标记函数。

当初咱们来编译这个文件。

$ emcc index.cc -s WASM=1 -O3 --no-entry -o index.wasm

仅生成 wasm 模块文件的编译形式，通常称为”standalone 模式”。

“-o”参数为咱们指定了输入的文件格式为“.wasm”，这就是通知 Emscripten 以“standalone”的形式来编译 C ++ 源码。

“–no-entry”参数则通知编译器，这个 wasm 模块没有申明“main”函数。

上述命令执行结束后，就会失去一个名为“index.wasm”的二进制模块文件。

此时咱们就能够尝试去运行这个 Web 利用，能够看到和期待的成果统一。

当然这个 demo 很简略，目前要施展 wasm 的劣势，更适宜将其利用在计算密集的性能。

当咱们编写完利用时，少不了要调试。那么如何针对 wasm 利用进行调试呢，Emscripten 也提供了一些形式。

首先是针对编译阶段，当应用 emcc 编译我的项目时，能够通过为命令增加“EMCC_DEBUG”环境变量的形式，来让 emcc 以“调试模式”来编译我的项目。

$ EMCC_DEBUG=1 emcc index.cc \
> -s WASM=1 \
> -O3 \
> --no-entry -o index.wasm

能够看到编译时输入了很多的信息，这是因为咱们将 EMCC_DEBUG 这个环境变量的值设置为 1，EMCC_DEBUG 的值能够设置为 3 个值，别离是 0、1、2。

0 示意敞开调试模式，这和不加这个环境变量是一样的成果；1 示意输入编译时的调试性信息，同时生成蕴含有编译器各个阶段运行信息的两头文件；可用于编译流程的调试。

能够通过 ls 命令查看生成了哪些文件；调试性信息中蕴含了各个编译阶段所理论调用的命令行信息，通过对这些信息剖析，可能辅助开发者查找编译失败的起因。

当 EMCC_DEBUG 的值设置为 2 时，能够失去更多的调试性信息。

当咱们胜利地编译了 wasm 利用，但在理论运行时产生了谬误，就须要在运行时进行调试。Emscripten 也提供了肯定的反对，咱们能够在编译时设定参数“-g“以保留与调试相干的信息。

当设置为”-gsource-map“时，emcc 会生成可用于在 Web 浏览器中进行“源码级”调试的非凡 DWARF 信息；通过这些非凡格局的信息，使咱们能够间接在浏览器中对 wasm 模块编译之前的源代码进行诸如“设置断点”、“单步跟踪”等调试伎俩。

这里咱们尝试调试之前编写的 index.cc。

$ emcc index.cc -gsource-map -s WASM=1 -O3 --no-entry -o index.wasm

此时从新加载 Web 利用并关上“开发者面板”的“sources”Tab，就能够通过“操作”C++ 源代码的形式，来为利用所应用的 wasm 模块设置断点。（wasm 模块的加载形式须要改为“流式编译”）。

通过这种形式，开发者就能够不便地在 wasm Web 利用的运行过程中，调试产生在 wasm 模块外部的“源码级”谬误。

WebAssembly 作为一种绝对较新的技术，能够先放弃一点理解。

关于javascript:编译wasm-Web应用

针对 Web 平台的编译

编码

编译

运行

仅生成 wasm 模块

调试利用

编译阶段

运行阶段