Web程序性能优化——asm.js和WebAssembly

广州芦苇科技web前端 · · 1147 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

asm.js

asm.jsJavaScript语言中一个可以高度优化的子集。通过避免JavaScript引擎某些难以优化的机制和模式(主要是垃圾回收和类型判断),达到JavaScript引擎运行优化的目的。换言之,正常的JavaScript代码会类型自动装换和垃圾自动回收的,而编写asm.js风格的代码则表示程序员需要管理内存和确定数据类型。

asm.js不提供任何额外的语法,只要编写asm.js的代码,在支持asm.js优化的JavaScript引擎中能被自动识别,从而让引擎实现自己的优化,而在不支持asm.js的引擎中也能正常运行。

手写asm.js例子

首先解决的是JavaScript中变量类型的问题

var a = 10;
var b = a;
var a = 10;
var b = a | 0;

上面两段代码的不同之处在于,第一段代码b的值类型在运行的时候才能被确定,而第二段代码中b总是会被当作32位整型处理。同样的还有对运算的限制,如(a + b) | 0把两个变量的加运算限制为更高效的整型加运算。在支持asm.jsJavaScript引擎中,运行上面的代码会进行底层优化。

第二个要解决的问题是内存分配,众所周知,JavaScript不提供垃圾回收相关的API,在JavaScript中讲垃圾回收大多数开发者会想到将不用的变量设为null,比如:

// 创建一个长度为10000的数组
var a = new Array(10000).fill('hello');

a = null;

但对于垃圾回收a = null只是告诉浏览器长度为10000的数组已经没有被任何变量引用,可以回收其占用的内存了,至于什么时候回收,浏览器有自己的想法。

asm.js中所说的内存分配和这个机制不同,asm.js的内存分配由程序员自己控制。使用ArrayBuffer创建一个数据缓冲区,可以在这个缓冲区存储和取值,而不需要再付出内存分配和垃圾回收的代价。ArrayBuffer是不能直接操作的,而是通过类型数组对象和DataView(视图)对象,具体用法请参考 MDN | ArrayBuffer,下面是一个例子

// 创建一个64k的数据缓冲区
var heap = new ArrayBuffer(0x10000);

// 使用64位浮点值数组引用这个缓冲区
var arr = new Float64Array( heap )

下面是一个更复杂的例子,使用asm.js风格的代码编写一个函数计算两数之间的相邻数的乘积,存储起来并计算总和

function ASM (heap) {

  var arr = new Int32Array(heap);

  function foo(x, y) {
    x = x | 0;
    y = y | 0;

    var i = 0;
    var p = 0;
    var sum = 0;
    for (i = x | 0; (i | 0) < (y | 0); p = (p + 8) | 0, i = (i + 1) | 0) {
      sum = (sum + i * (i + 1)) | 0;

      arr[p >> 3] = (i * (i + 1)) | 0;
    }

    return +sum;
  }

  return foo;
}

var heap = new ArrayBuffer(0x1000);

var foo = ASM(heap)

foo(0, 1024) // 357913600

通常用“模块”机制将asm.js代码封装起来,如上面的代码,内存区变量为私有变量,不可在外部更改。
上面代码中,使用ArrayBuffer分配内存,使用Int32Array规定数据类型,在使用数据时,每个数据也都使用特殊的符号标识数据类型,在支持asm.js的引擎中,这些都是触发优化的信号,而在不支持asm.js的引擎,这些符号也是正常的运算符而已,不影响计算结果。

Emscripten

在实际运用中,不大可能手写asm.js规范的代码,写起来异常麻烦并且容易出错,所以通常asm.js代码通常是其他语言的编译目标代码,比如使用EmscriptenC / C++代码编译成asm.js

安装Emscripten

$ git clone https://github.com/juj/emsdk.git
$ cd emsdk
$ ./emsdk install latest
$ ./emsdk activate latest
$ source ./emsdk_env.sh

Emscripten的编译用法非常简单

  1. 编写一个C++程序hello.cc。
#include <iostream>

int main () {
  std::cout << "Hello World" << std::endl;
}
  1. 使用以下命令将C++源码编译成asm.js
emcc hello.cc

输出文件a.out.js就是asm.js规范的JavaScript代码,默认执行main函数。

WebAssembly

WebAssembly字节码是一种抹平了不同CPU架构的机器码,WebAssembly字节码不能直接在任何一种CPU架构上运行,但由于非常接近机器码,可以非常快的被翻译为对应架构的机器码,因此WebAssembly运行速度和机器码接近,这听上去非常像Java字节码。

WebAssembly出现之前,浏览器只能运行.js后缀的编程代码文件,JavaScript是web应用开发的唯一语言,但是在支持WebAssembly的浏览器上,现在能运行.wasm后缀的代码文件了。

WebAssembly几乎不可能是手工编写的,一般由其他语言编译而成,目前能编译成WebAssembly的高级语言有:

  • AssemblyScript: 语法和TypeScript一致,对前端来说学习成本低,为前端编写WebAssembly最佳选择;
  • c\c++: 官方推荐的方式;
  • Rust: 语法复杂、学习成本高,对前端来说可能会不适应;
  • Kotlin: 语法和 JavaJS 相似,语言学习成本低;
  • Golang: 语法简单学习成本低。

Hello world

使用AssemblyScript编译成WebAssembly,首先安装

yarn global add AssemblyScript/assemblyscript

编写源代码demo.ts

export function foo (x: i32):i32 {
  return x * x;
}

使用asc demo.ts -o demo.wasm编译代码,使用js代码fetch方法加载wasm模块

fetch('./demo.wasm')
  .then(res => {return res.arrayBuffer()})
  .then(WebAssembly.instantiate) // 编译成当前CPU架构的机器码并实例化
  .then(module => { // module为WebAssembly模块
    console.log(module.instance.exports.foo(100))
  })

总结

asm.jsWebAssembly都是底层优化web程序性能的技术,他们通常都是由其他语言编译而成。asm.js是JavaScript的一个子集,所以在不支持asm.js优化的浏览器上也能正常运行,它的文件类型是文本;WebAssembly则是更新的技术,提供了新的API,在不支持的浏览器上无法运行,它的文件类型是二进制字节码。这两种技术虽然都是极高提升web程序性能的技术,但一般开发中不会使用到,只有在密集型计算、图形处理等计算场景才能发挥出它们的巨大优势。

作者简介:叶茂,芦苇科技web前端开发工程师,代表作品:口红挑战网红小游戏、芦苇科技官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发,专注于前端框架、服务端渲染、SEO技术、交互设计、图像绘制、数据分析等研究。

欢迎和我们一起并肩作战: web@talkmoney.cn
访问 www.talkmoney.cn 了解更多


有疑问加站长微信联系(非本文作者)

本文来自:简书

感谢作者:广州芦苇科技web前端

查看原文:Web程序性能优化——asm.js和WebAssembly

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

1147 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传