javascript - 获取 WebAssembly instantiateStreaming 进度

Question

WebAssembly.instantiateStreaming是fastest下载并实例化 .wasm 模块的方法，但是对于大型 .wasm 文件，它仍然需要很长时间。在这种情况下，仅显示微调器并不能提供足够的用户反馈。

有没有办法使用 WebAssembly.instantiateStreaming api 并获取某种形式的进度事件，以便可以向用户显示 eta？理想情况下，我希望能够显示百分比进度条/估计剩余时间指示器，以便用户知道他们需要等待多长时间。

Answer 1

构建答案 here .

获取WebAssembly.instantiateStreaming的进度/WebAssembly.compileStreaming使用实现其自己的 Controller 的自定义 ReadableStream 创建新的 Fetch Response。

示例:

// Get your normal fetch response
var response = await fetch('https://www.example.com/example.wasm'); 

// Note - If you are compressing your .wasm file the Content-Length will be incorrect
// One workaround is to use a custom http header to manually specify the uncompressed size 
var contentLength = response.headers.get('Content-Length');

var total = parseInt(contentLength, 10);
var loaded = 0;

function progressHandler(bytesLoaded, totalBytes)
{
    // Do what you want with this info...
}

var res = new Response(new ReadableStream({
        async start(controller) {
            var reader = response.body.getReader();
            for (;;) {
                var {done, value} = await reader.read();

                if (done)
                {
                    progressHandler(total, total)
                    break
                }

                loaded += value.byteLength;
                progressHandler(loaded, total)
                controller.enqueue(value);
            }
            controller.close();
        },
    }, {
        "status" : response.status,
        "statusText" : response.statusText
    }));

// Make sure to copy the headers!
// Wasm is very picky with it's headers and it will fail to compile if they are not
// specified correctly.
for (var pair of response.headers.entries()) {
    res.headers.set(pair[0], pair[1]);
}

// The response (res) can now be passed to any of the streaming methods as normal
var promise = WebAssembly.instantiateStreaming(res)