使用 Web Workers（垃圾收集器）可能出现内存泄漏

Question

我有一个应用程序，它在单击按钮后调用网络工作人员。计算被转移到工作线程以减轻 UI 负担，并使其在计算时响应用户操作。

一切顺利，大约 0.8-1.5 秒后，工作人员发送响应。在 worker.onmessage 中，我执行了所有需要的 DOM 操作，但在此垃圾收集器出现之后，实际上会阻塞 UI 2 秒或更长时间，具体取决于 CPU。这真的让我很困惑，因为 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 需要记住的一件事是，当您将对象发送给工作人员时，您正在克隆该对象，尤其是当您在示例中使用它们时。因此，让我们用一个愚蠢的例子来运行一下：

1. 制作大对象（你在评论中说 2M...wtf...哇） - 在主线程中分配 2M
2. 发布到工作线程，主线程中仍然有 2M，加上创建的任何额外内容作为主线程中的绒毛来 JSONify 你的对象/数组，然后转到工作线程，工作线程中的 2M 是的，
3. 在工作线程中的那个傻瓜上 Chug...这里主线程中的 2M+ 只是坐在等待 GC，现在可能会发生，可能不是...GC 在一定数量的新一代对象达到阈值后触发...比如在创建大量新对象和 dom 元素之后或期间：D
4. Worker 回复一条消息，让我们假设 2M，即现在在主线程中重新创建了一个新的 2M（是的），加上 de JSONify 对象所需的任何绒毛内存对象......你知道这是怎么回事。

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