花椒前端用WebAssembly提升前端应用解压缩性能的尝试

奇技指南

WebAssembly提升前端应用解压缩性能的尝试

#include <stdio.h>
#include <stdlib.h>
#include <emscripten.h>
#include "zip/src/zip.h"

EMSCRIPTEN_KEEPALIVE
int load_zip_data(void (*callback)(void *buf, int, const char*, int, int)) {
    struct zip_t *zip = zip_open("archive.zip", 0, 'r');
    int i, n = zip_total_entries(zip);
    void *buf = NULL;
    size_t bufSize;
    for (i = 0; i < n; i++) {
        zip_entry_openbyindex(zip, i);
        {
            const char *name = zip_entry_name(zip);
            zip_entry_open(zip, name);
            {
                zip_entry_read(zip, &buf, &bufSize);
            }
            callback(buf, bufSize, name, i, n);
        }
        zip_entry_close(zip);
        free(buf);
    }
    zip_close(zip);
    return n;
}

EMSCRIPTEN_KEEPALIVE是emscripten.h中定义的一个宏，用于防止C/C++编译器把没有被调用的函数或代码段删除，即DCE(Dead Code Elimination)。 从导出C函数的角度来说，它与在命令行里指定 -s EXPORTED_FUNCTIONS="['_load_zip_data']"具有相同的作用。

load_zip_data函数的调用参数是一个函数指针(Function Pointer)，用于回调JavaScript方法，传回压缩包中的文件数据、文件名、文件索引index和压缩包中全部的文件数。

如果一个函数指针指向的函数需要在多个地方调用的话，也可以用typedef定义一个类型以方便复用，比如：

typedef void(*callback)(void *buf, int size, const char* name, int i, int n);

emcc c/unzip.c c/zip/src/zip.c \
	     -o unzip/unzip.js \
	     -O3 \
	     -s WASM=1 \
	     -s FORCE_FILESYSTEM=1 \
	     -s EXTRA_EXPORTED_RUNTIME_METHODS="['cwrap', 'addFunction', 'UTF8ToString', 'FS']" \
	     -s RESERVED_FUNCTION_POINTERS=1 \
	     -s MODULARIZE=1 \
	     -s ENVIRONMENT='worker' \
	     -s ASSERTIONS=1 \
	     -s EXPORT_ES6=1

上面的命令会在unzip目录下生成一个unzip.wasm和对应的胶水JS代码unzip.js，unzip.wasm支持操作一个虚拟的文件系统，支持ES6语法，预留一个存放函数指针的单元，支持在Web Worker内使用。编译出来的Wasm大小在65k，加载耗时在几十毫秒左右。

import getModule from '../unzip/unzip';

let wasmResolve;
let wasmReady = new Promise((resolve) => {
    wasmResolve = resolve;
});

const Module = getModule({
    onRuntimeInitialized() {
        onWasmLoaded();
    },
    instantiateWasm(importObject, successCallback) {
        self.fetch('unzip.wasm', {
            mode: 'cors',
        }).then((response) => {
            if (response.ok) {
                return response.arrayBuffer();
            }
            throw Error(response.status);
        }).then((wasmBinary) => {
            WebAssembly.instantiate(new Uint8Array(wasmBinary), importObject)
                .then((output) => {
                    wasmResolve(output.instance);
                    successCallback(output.instance);
                })
                .catch((e) => {
                    console.warn(`[js] wasm instantiation failed! ${e}`);
                });
        });
        return {};
    },
    print(text) {
        console.log(text);
    },
    printErr(err) {
        console.error(err);
    },
});

当Wasm实例化完成之后，会调用onWasmLoaded方法，在这个方法里我们可以定义两个用于JavaScript调用Wasm内的C函数的方法和一个给Wasm回调传回解压后数据的回调函数指针，postMessage用于通知主线程Wasm已经初始化完毕：

function onWasmLoaded() {
    self._loadZipEntryData = Module.cwrap('load_zip_data', 'number', ['number']);
    self._addZipEntryDataPtr = Module.addFunction(addZipEntryData.bind(this));
    postMessage({
        type: 'inited'
    });
}

cwrap是Emscripten提供的用于封装C函数给JavaScript调用的工具函数，类似功能的还有一个ccall，在用法上有一些不同。cwrap的三个参数分别是C函数名、返回值类型、调用参数类型数组，ccall的参数除了这三个之外还多一个实际参数的数组。cwrap很像是封装一个柯里化函数供JS调用，而ccall则是带实参的直接调用。

-s EXTRA_EXPORTED_RUNTIME_METHODS="['addFunction','removeFunction']"

_loadZipEntryData 和 _addZipEntryDataPtr定义好之后，让我们来看看怎么使用它们。

上面最后这一行就是调用Wasm中的load_zip_data函数，传入的参数是JavaScript里面用于接收解压出的文件数据的回调函数指针。

load_zip_data函数会遍历压缩包中的每一个文件，并调用回调函数传回每个文件数据在虚拟文件系统内的起始地址、数据大小、文件名、在压缩包中的索引i和压缩包中的全部文件数n，其中后两个参数用于判断当前压缩包是否已经全部解压完毕。

callback(buf, bufSize, name, i, n);

360技术公众号

技术干货|一手资讯|精彩活动