来源 | OSCHINA 社区

作者 | 京东云开发者-京东物流 潘维高

原文链接：https://my.oschina.net/u/4090830/blog/10091194

1 WebAssembly 是什么？

一种运行在现代网络浏览器中的新型代码，并且提供新的性能特性和效果

2 为什么需要 WebAssembly？

3 WebAssembly 的工作原理

WebAssembly 被设计为 JavaScript 的一个组件，不是它的替代品。虽然有些开发者试图只用 WebAssembly 来创建整个网站，但这不是普遍情况。一般情况 JavaScript 仍然是更好的选择。

4 WebAssembly 模块内部

5 哪些语言可用来创建 WebAssembly 模块？

• C 和 C++

• Rust 正致力于成为 WebAssembly 的首选编程语言。

• AssemblyScript 是一种新编译器，它用来将 TypeScript 转换为 WebAssembly。

• TeaVM 是一个将 Java 转译到 JavaScript 的工具，现在也可以生成 WebAssembly 了。

• Go 1.11 为 WebAssembly 增加了一个试验性项目，其编译后的 WebAssembly 模块包含一个垃圾回收器。

• Pyodide 是 Python 的一个项目，其中包含了 Python 科学栈的核心包：Numpy、Pandas 和 matplotlib。

• Blazor 是微软的实验性项目，用于将 C# 引入 WebAssembly。

6 WebAssembly 可以用在哪？

6.1 一些使用 webAssembly 的案例

7 WebAssembly 怎么用？

7.1 得到 wasm 文件手动引入

var importObject = {
  imports: {
      imported_func: function(arg) {
        console.log(arg);
      }
    }
  };
  // 输出 42
  fetch('simple.wasm')
  .then(res =>
    res.arrayBuffer()
  ).then(bytes =>
    WebAssembly.instantiate(bytes, importObject)
  ).then(results => {
    results.instance.exports.exported_func();
  });

7.2 得到编译好的 npm 包引入执行

// alert(`Hello, ${name}`)
const js = import("./node_modules/@jdl/hello-wasm/hello_wasm.js");
js.then(js => {
  js.greet("WebAssembly");
});

// rust
extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    pub fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}

点这里 ↓↓↓ 记得 关注✔ 标星⭐ 哦