WebAssembly简单试用例子

webassembly

WebAssembly自从提出,就一直被火热关注,前端性能至少有了一个解决方案,我们试着写一个小例子。

【爆款云服务器限时促销】
阿里云云服务器ECS实例2核2G,新人专享渠道特惠价只要82元!特惠热卖中。 点击立即购买

安装环境

以Mac系统为例子

  • 安装cmake brew install cmake
  • 安装Python 2.7.X brew install python2
  • 安装GCC (Mac自带)
  • 安装Git (Mac自带)

校验环境

确认git, pythoncmake命令可以用

cmake

# cmake --version
cmake version 3.10.1
 
CMake suite maintained and supported by Kitware (kitware.com/cmake).
@Nicholas-MBP ➜ WebAssembly 

python

# python -V
Python 2.7.10

git

# git --version
git version 2.14.3 (Apple Git-98)

安装工具链

安装Aseembly SDK

git clone https://github.com/juj/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest

PATH设置

source ./emsdk_env.sh --build=Release

运行一个简单的例子

hello.c

int doubler(int x) {
  return 2 * x;
}

生成hello.wasm

emcc hello.c -Os -s WASM=1 -s SIDE_MODULE=1 -o hello.wasm

hello.js

function loadWebAssembly(filename, imports) {
  // Fetch the file and compile it
  return fetch(filename)
    .then(response => response.arrayBuffer())
    .then(buffer => WebAssembly.compile(buffer))
    .then(module => {
      // Create the imports for the module, including the
      // standard dynamic library imports
      imports = imports || {};
      imports.env = imports.env || {};
      imports.env.memoryBase = imports.env.memoryBase || 0;
      imports.env.tableBase = imports.env.tableBase || 0;
      if (!imports.env.memory) {
        imports.env.memory = new WebAssembly.Memory({ initial: 256 });
      }
      if (!imports.env.table) {
        imports.env.table = new WebAssembly.Table({ initial: 0, element: 'anyfunc' });
      }
      // Create the instance.
      return new WebAssembly.Instance(module, imports);
    });
}
 
// Main part of this example, loads the module and uses it.
loadWebAssembly('hello.wasm')
  .then(instance => {
    var exports = instance.exports; // the exports of that instance
    console.log(exports._doubler(55)) // Output: 110
  }
);

运行下,不出意外的话Console打印110

分享

TITLE: WebAssembly简单试用例子

LINK: https://www.qttc.net/492-webassembly-example.html

NOTE: 原创内容,转载请注明出自琼台博客