Chrome 与 webworkers 和 createImageBitmap 崩溃答案

【问题标题】：Chrome crash with webworkers and createImageBitmapChrome 与 webworkers 和 createImageBitmap 崩溃
【发布时间】：2018-03-19 12:30:26
【问题描述】：

我目前在使用网络工作者加载图像时遇到问题。我想批量加载一堆图像，然后对这些图像进行一些处理（在我的情况下，使用createImageBitmap 将源图像转换为ImageBitmap）。目前，用户可以取消请求。如果工作人员尚未完成，这会在尝试终止工作人员时导致崩溃。我在这里创建了一个小提琴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);
  });
}

在第一个已解决的承诺上调用closeWorker() 可能看起来有点古怪，但这是否意味着崩溃是可重现的。我只用64.0.3282.186 (Official Build) (64-bit)在chrome上测试过

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

【问题讨论】：

loadImageWithWorker 你知道这不会等待，并加载 23 张 7360 x 4912 像素大小的图像，.. 我对浏览器崩溃并不感到惊讶。如果您让您的工作人员一次处理一张图像，可能会更好。
@Keith 感谢您的回复。图像在正常工作流程下加载良好（删除 closeWorker() 并自己查看）。问题出在尝试安全终止工作人员时
我仍然认为加载 3 Gigs 的图像并不理想。我认为您的问题很可能归结为当您致电 closeworker 时，您可能还有另外 22 个异步操作待处理。我怀疑在这种模式下突然终止工人是理想的。
@Keith 让我们不要被图像的大小所困扰，因为即使只加载 4 张图像，它仍然会崩溃，但我同意这个问题似乎是在仍然存在时终止工作人员网络请求待处理。

标签： javascript google-chrome crash web-worker

【解决方案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/

【讨论】：