前端基础 | web性能优化（二）-广州芦苇科技

asm.js

asm.js是JavaScript语言中一个可以高度优化的子集。通过避免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.js的JavaScript引擎中，运行上面的代码会进行底层优化。

第二个要解决的问题是内存分配，众所周知，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代码通常是其他语言的编译目标代码，比如使用Emscripten将C / 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的编译用法非常简单

编写一个C++程序hello.cc。

#include <iostream>

int main () {
  std::cout << "Hello World" << std::endl;
}

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

作者简介：叶茂，芦苇科技web前端开发工程师，代表作品：口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端领域框架、交互设计、图像绘制、数据分析等研究。一起并肩作战： yemao@talkmoney.cn 访问 www.talkmoney.cn 了解更多