Node.js中的WebAssembly入门

简介: Node.js中的WebAssembly入门 WebAssembly是一种令人兴奋的新语言,许多JavaScript引擎都支持它。WebAssembly有望使编译C和C ++等语言变得更容易在浏览器中运行。

Node.js中的WebAssembly入门

WebAssembly是一种令人兴奋的新语言,许多JavaScript引擎都支持它。WebAssembly有望使编译C和C ++等语言变得更容易在浏览器中运行。不过,我最兴奋的是能够编写优化的自定义算术和缓冲区操作,比如JavaScript中的快速十进制浮点运算,而无需等待TC39来解决。在本文中,我将向您展示如何获得几个在Node.js中运行的基本WebAssembly示例,并运行几个简单的基准测试来显示性能影响。

注意:本文中的代码仅在带有--expose-wasm标志的节点7.2.1上进行了测试。该代码将不能在节点6.x或节点7.6.0工作,并将不会没有工作--expose-wasm标志。

什么是WebAssembly无论如何?

--expose-wasm标志可让您访问Wasm具有用于创建WebAssembly 模块的多个辅助函数的全局对象。就本文而言,WebAssembly模块仅是WebAssembly中编写的函数的集合。

$ ~/Workspace/node-v7.2.1-linux-x64/bin/node --expose-wasm
> Wasm
{ verifyModule: [Function],
  verifyFunction: [Function],
  instantiateModule: [Function],
  experimentalVersion: 11 }
>

要创建WebAssembly模块,您需要Wasm.instantiateModule()使用表示模块的Uint8Array进行调用。下面是一个实例化一个空的WebAssembly模块的例子。

$ ~/Workspace/node-v7.2.1-linux-x64/bin/node --expose-wasm
> Wasm.instantiateModule(new Uint8Array([0x00, 0x61, 0x73, 0x6d, 0x0b, 0x00, 0x00, 0x00]));
{}
>

因此,在基本级别上,创建WebAssembly模块包括将正确的十六进制数字放入instantiateModule()函数中。这些十六进制数字意味着什么?这些十六进制数字是每个文件开头的序言.wasm.wasm是WebAssembly文件的规范扩展)。每个WebAssembly文件都必须包含这些字节,因此这是最小可行的WebAssembly模块。

添加两个数字

谢天谢地,你不必自己写字节。有很多编译器用于编译C,C ++甚至Rust到WebAssembly。还有一种称为“WebAssembly AST” 的中间格式,简称“wast”。这是一个函数,返回它的2个参数的总和看起来像wast:

(module
  (func $addTwo (param i32 i32) (result i32)
    (i32.add
      (get_local 0)
      (get_local 1)))
  (export "addTwo" $addTwo))

你可以使用这个在线工具将代码编译成wasm二进制代码,或者你可以直接从我编译.wasm下载。

接下来,你如何.wasm在Node.js中使用文件?为了使用它.wasm,你需要加载文件并将节点的库返回的Node.js缓冲区fs转换为ArrayBuffer。

const fs = require('fs');
const buf = fs.readFileSync('./addTwo.wasm');
const lib = Wasm.instantiateModule(new Uint8Array(buf)).exports;

console.log(lib.addTwo(2, 2)); // Prints '4'
console.log(lib.addTwo.toString()); // Prints 'function addTwo() { [native code] }'

addTwoWebAssembly与普通的旧JavaScript实现相比有多快?这是一个简单的基准:

const fs = require('fs');
const buf = fs.readFileSync('./addTwo.wasm');
const lib = Wasm.instantiateModule(new Uint8Array(buf)).exports;

const Benchmark = require('benchmark');

const suite = new Benchmark.Suite;

suite.
  add('wasm', function() {
    lib.addTwo(2, 2);
  }).
  add('js', function() {
    addTwo(2, 2);
  }).
  on('cycle', function(event) {
    console.log(String(event.target));
  }).
  on('complete', function() {
    console.log('Fastest is ' + this.filter('fastest').map('name'));
  }).
  run();

function addTwo(a, b) {
  return a + b;
}
$ ~/Workspace/node-v7.2.1-linux-x64/bin/node --expose-wasm ./addTwo.js
4
wasm x 43,497,742 ops/sec ±0.77% (88 runs sampled)
js x 66,021,200 ops/sec ±1.28% (83 runs sampled)
Fastest is js

阶乘

在上面的例子中,WebAssembly与普通的老JS没有任何性能上的好处。让我们做一些更复杂的事情:递归地计算因式分解。这是一个.wast公开一个fac()递归计算阶乘函数的文件。

(module
  (func $fac (param i32) (result i32)
    (if (i32.lt_s (get_local 0) (i32.const 1))
      (then (i32.const 1))
      (else
        (i32.mul
          (get_local 0)
          (call $fac
            (i32.sub
              (get_local 0)
              (i32.const 1)))))))
  (export "fac" $fac))

你可以使用这个工具)编译.wasm或只是在这里下载它。

下面是将计算100!与WebAssembly和JavaScript 进行比较的另一个微不足道的基准:

const fs = require('fs');
const buf = fs.readFileSync('./factorial.wasm');
const lib = Wasm.instantiateModule(new Uint8Array(buf).buffer).exports;

const Benchmark = require('benchmark');

const suite = new Benchmark.Suite;

suite.
  add('wasm', function() {
    lib.fac(100);
  }).
  add('js', function() {
    fac(100);
  }).
  on('cycle', function(event) {
    console.log(String(event.target));
  }).
  on('complete', function() {
    console.log('Fastest is ' + this.filter('fastest').map('name'));
  }).
  run();

function fac(n) {
  if (n <= 0) {
    return 1;
  }
  // `x | 0` rounds down, so `2.0001 | 0 === 2`. This helps deal with floating point precision issues like `0.1 + 0.2 !== 0.3`
  return (n * fac(n - 1)) | 0;
}
$ ~/Workspace/node-v7.2.1-linux-x64/bin/node --expose-wasm ./factorial.js
wasm x 2,484,967 ops/sec ±2.09% (87 runs sampled)
js x 1,088,426 ops/sec ±2.63% (80 runs sampled)
Fastest is wasm
$

继续

在这些基本的例子中,WebAssembly在允许您真正优化JS代码方面显示出了承诺。我的基准测试非常简陋,WebAssembly仍然不稳定,并且采用不好,所以不要急于尝试编写下一个Web应用程序。然而,现在是玩WebAssembly的时候了,尤其是因为它可以在Node.js中使用。

原文地址http://thecodebarbarian.com/getting-started-with-webassembly-in-node.js.html

相关文章
|
1月前
|
JavaScript 前端开发 C语言
javascript基础入门
javascript基础入门
23 1
|
3月前
|
JSON JavaScript 前端开发
Danfo.js专题 - Danfo.js与Dnotebook简介与入门
Danfo.js专题 - Danfo.js与Dnotebook简介与入门
46 0
|
3月前
|
JSON JavaScript 前端开发
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)(下)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
49 2
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
70 0
|
3月前
|
JavaScript 前端开发 API
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)(下)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
34 0
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
64 1
|
2月前
|
JSON 前端开发 JavaScript
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
35 0
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
|
2月前
|
资源调度 JavaScript 关系型数据库
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)
33 0
|
3月前
|
存储 XML JavaScript
JavaScript基本语法:从入门到精通
JavaScript基本语法:从入门到精通
59 1