javascript - Chrome 与 webworkers 和 createImageBitmap 崩溃

Question

我目前在使用网络 worker 加载图像时遇到问题。我想批量加载一堆图像，然后对这些图像进行一些处理(在我的例子中，使用 createImageBitmap 将源图像转换为 ImageBitmap)。目前用户可以取消请求。如果工作线程尚未完成，则在尝试终止该工作线程时，这会导致崩溃。我在这里创建了一个 fiddle https://jsfiddle.net/e4wcro0o/18/持续崩溃。

问题出在这里:

function closeWorker() {
   if (!isClosed) {
    console.log("terminating worker");
    isClosed = true;
    worker.terminate();
  }
}

for (let i = 0; i < srcImages.length; i++) {
    loadImageWithWorker(new URL(srcImages[i], window.location).toString()).then(function(img) {
    closeWorker();
    console.log(img);
  });
}

在第一个已解决的 Promise 上调用 closeWorker() 可能看起来有点奇怪，但这是否意味着崩溃是可重现的。我只在 chrome 上使用 64.0.3282.186(官方版本)(64 位)

进行了测试

关于我做错了什么有什么想法吗？

Answer 1

我也遇到过同样的问题。我认为原因是在 createImageBitmap 函数期间终止工作线程。

我已经修改了您的 JSFiddle，采用了尽早终止工作线程以避免崩溃的方法。

const worker = createWorker(() => {

    const pendingBitmaps = {};
    var pendingKill = false;

    self.addEventListener("message", e => {

        const src = e.data;

        if (src == "KILL") {
            pendingKill = true;
            Promise.all(Object.values(pendingBitmaps)).then(_ => self.postMessage("READY"));
        }

        // not accepting anymore conversions
        if (pendingKill) {
            self.postMessage({src, bitmap: null});
            return;
        }

        pendingBitmaps[src] = fetch(src).then(response => response.blob())
            .then(blob => {
                if (pendingKill) return null;
                return createImageBitmap(blob);
            })
            .then(bitmap => {
                self.postMessage({src,bitmap});
                delete pendingBitmaps[src];
            })
    })
});

https://jsfiddle.net/wrf1sLbx/16/