javascript - 使用 Web Worker(垃圾收集器)可能发生内存泄漏

Question

我有一个在点击按钮后调用网络 worker 的应用程序。计算被转移到 worker 以减轻 UI 并使其在进行计算时响应用户操作。

一切正常，大约 0.8-1.5 秒后，工作人员发送响应。在 worker.onmessage 中，我执行了所有需要的 DOM 操作，但在此垃圾收集器出现后，根据 CPU 的不同，实际上阻塞了 UI 2 秒或更长时间。这让我很困惑，因为 UI 阻塞是我想要防止的。

这是时间轴/内存控制台选项卡的屏幕截图:

如您所见，垃圾收集器事件发生在所有 DOM 操作之后。实际上只有一个重绘事件(使用了DocumentFragment)。

主要js代码:

var sortWorker = new Worker('js/contactsorter.js');
sortWorker.onmessage = function(e) {
    var messages = [];
    e.data.forEach(function(userDoc) {
        var contactSection = _drawContact(userDoc);
        messages.push(contactSection);
    });
    
    meta.append(messages); // this actually appends document fragment as a child
};

sortWorker.postMessage(postMessageData);

contactsorter.js( worker ):

onmessage = function(e) {
    var uid, output = [], usersStat = {};

    // calculations...
    
    postMessage(output);
    close();
};

有没有办法避免在这个地方发生这些垃圾收集器事件？

UPD:在我看来，垃圾收集器事件的时间取决于发送给工作人员的数据量。
UPD2:在关机和启动后，垃圾收集器事件只发生两次，因此阻塞 UI 的时间不到一秒钟。嗯？

Answer 1

关于 Web Workers 需要记住的一件事，尤其是当您在示例中使用它们时，就是当您将对象发送给 worker 时，您正在克隆该对象。所以让我们用一个愚蠢的例子来运行这个:

1. 制作大对象(你在评论中说 2M...wtf...哇)- 在主线程中分配 2M
2. 发布到 worker，主线程中仍然有 2M，加上在主线程中创建的任何额外内容作为 fluff 来 JSONify 你的对象/数组，然后发送到 worker，其中 2M 在 worker yay
3. Chug on the sucker in worker...这里主线程中的 2M+ 正等待 GC，可能现在发生，可能不会...GC 在一定数量的新一代对象达到阈值后触发。 .. 比如在创建大量新对象和 dom 元素之后或期间说 :D
4. Worker 返回一条消息，假设 2M 现在在主线程中重新生成一个新的 2M(是的)，加上去 JSONify 对象所需的任何绒毛内存对象......你知道这是怎么回事.

既然你说这是一个 chrome 应用程序(另一条评论)，那么也许你可以重组你的代码以利用 Transferable Objects避免对象克隆创建临时对象等。当然，要使用可转移对象，您必须将其重组为数组缓冲区，这本身就是一个黑魔法。