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

奇技指南

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

#include 

#include 

#include 

#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定义好之后，让我们来看看怎么使用它们。

fetch(url).then((res) => {

    res.arrayBuffer().then((buffer) => {

        loadZipEntryData(buffer);

    });

});




...




function loadZipEntryData(zipBuffer) {

    Module.FS.writeFile('archive.zip', new Uint8Array(zipBuffer));

    self._loadZipEntryData(self._addZipEntryDataPtr);

}

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

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

let obj = {};

function addZipEntryData(buff, size, namePtr, i, n) {

    const outArray = Module.HEAPU8.subarray(buff, buff + size);

    const fileName = Module.UTF8ToString(namePtr);

    if(fileName.indexOf('__') === -1) {

        const blob = new Blob([outArray]);

        obj[fileName] = URL.createObjectURL(blob);

    }

    if(i === (n -1)) {

        const o = {};

        Object.assign(o, obj);

        postMessage({

            url: zipUrl,

            files: o,

        });

        obj = {};

    }

}

360技术公众号
技术干货|一手资讯|精彩活动