sources修改js代码_WebAssembly-JS在性能逆境下召唤强援

webassembly的作用

webassembly是一种底层的二进制数据格式和一套可以操作这种数据的JS接口的统称。我们可以认为webassembly的范畴里包含两部分

wasm: 一种体积小、加载快并且可以在Web浏览器端运行的底层二进制数据格式，并且可以由C++等语言转化而来
webassembly的操作接口：例如WebAssembly.instantiate就可以将一份wasm文件编译输出为JS能够直接调用的模块对象

打破性能瓶颈

一直以来，我们都比较关心JS的运行速度问题，V8引擎解决了绝大多数情况下遇到的问题，但是少数情况下我们进行大量本地运算的时候，仍然可能遇到性能瓶颈，需要优化，这个时候webassembly的作用就凸现出来了

webassembly项目的编码流程

性能无强关的部分用JS编写
性能强相关的，并且需要大量本地运算的部分，先用C++/Rust编写，通过命令行工具转化为wasm代码后让JS调用

当然，上面的概括也许太过简略，大家可以看看Robert的原文以得到更为详细的认识

二.运行Fibonacci函数的性能对比

有位博主，对比了运行递归无优化的Fibonacci函数的时候，WebAssembly版本和原生JavaScript版本的性能差距，下图是这两个函数在值是45、48、50的时候的性能对比。

第二组测试：”ivweb”短字符加密100000 次

IE兼容解决方案

Internet Explorer 11 是最后一个占有很大的市场份额，但不支持wasm的浏览器。我们可以通过 binaryen 项目的 wasm2js 工具，将我们的 WebAssembly 编译成 JavaScript，就可以获得 IE11 的大部分支持了

实战 WebAssembly

在浏览器中使用WebAssembly主要有两种方式：

编写Rust代码，然后通过wasm-pack转化成wasm代码
编写C/C++代码，然后通过Emscripten转化成wasm代码

备注：Rust是一门高性能的系统编程语言

通过Rust接入WebAssembly

参考MDN的这篇文档能够非常方便地跑起一个Demo

1.安装rustup，初始化Rust环境，它会顺带安装cargo等工具（相当于前端的Node安装）

2.安装编译工具wasm-pack（相当于前端的babel）

3.创建一个文件夹，进入后运行下面代码，初始化一个Rust 项目

初始化的文件夹如下所示

编译成功后，新增了pkg文件夹和target文件夹

7. 将包发布到npm

8.安装刚刚发布的wasm模块，并通过webpack工具加载后，在浏览器运行以下代码

9.浏览器输出

4.运行生成的h.js，则可看到输出了Hello World

下面我们就来介绍下怎么手动去写这些API

接口

>> WebAssembly.Instance

实例包含所有的 WebAssembly 导出函数 ,允许从JavaScript 调用 WebAssembly 代码.

对象属性

exports属性: 一个对象，该对象包含从WebAssembly模块实例导出的所有函数属性

>> WebAssembly.Module

包含已经由浏览器编译的无状态 WebAssembly 代码，可以高效地与 Workers 共享、缓存在 IndexedDB 中，和多次实例化。

对象属性

exports属性：一个数组，内容是所有已声明的接口的描述。
imports属性和：一个数组，内容是所有已声明的引用的描述。

方法

>> WebAssembly.instantiate

它是编译和实例化 WebAssembly 代码的主要方法

参数:包含你想编译的wasm模块二进制代码的ArrayBuffer的类型实例

返回值：一个Promise, resolve后的值如下所示

Example

webassembly的未来展望

多线程
SIMD（单指令流多数据流）
64位寻址
流式编译（在下载的同时编译 WebAssembly 文件）
分层编译器
隐式 HTTP 缓存

白鹭游戏引擎

白鹭游戏引擎是一套HTML5游戏开发解决方案，它衍生了开发莽荒纪同名手游、梦道、坦克风云的等游戏，而利用 WebAssembly，白鹭引擎让游戏运行性能提升了300%。

声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！