了解 Chrome DevTools 内存性能图中的模式

Question

我正在尝试了解如何在使用计时器时防止内存泄漏。我相信 Chrome 开发工具性能选项卡（我仍在学习此功能）内存图向我展示了内存管理方面的不良模式。我相信每次触发 Timer 时都会出现“锯齿”模式。

我有一个简单的test case（1. 右键单击​​“timer-adder.html”，2.单击“预览”以预览加载的 HTML），其中涉及使用构造函数创建对象计时器，换句话说，对于每次更新，DOM 在 setInterval 回调中更改。

//...
start: function (initialTime, prefixedId) {
        let $display = document.getElementById(prefixedId + '-display');
        if ($display.style.display === 'none') { $display.style.display = 'block'; }
        $display.textContent = TimerHandler.cycle(initialTime);
        $display = null;
        return setInterval(function () {
            this.initialTime--;
            (this.initialTime === 0 && this.pause());
            document.getElementById(prefixedId + '-display').textContent = TimerHandler.cycle(this.initialTime);
        }.bind(this), 1000);
},
/...

尝试尽量减少泄漏，但与我认为手头的问题没有直接关系：

• 将 $display 分配给 null 以使其可收集（垃圾收集）。
• 清除间隔；

我认为不好的模式： View post on imgur.com（可缩放）

公平的内存使用会转化为显示水平线的 DevTools？对于这种副作用，更安全的方法是什么？因为，正如现在的测试一样，我认为从长远来看，多个活动计时器会导致内存过载，从而导致性能明显下降。

PS：作为一个新人，我希望这是一个公平的问题介绍。谢谢。

Answer 1

从上一部分可以看出，垃圾收集器能够释放该内存。因此没有内存泄漏。

垃圾回收是一项复杂的任务，这就是为什么 V8 会尽量减少 stop-the-world 回收的数量。或者换句话说：它只在需要时清理内存。 在你的情况下它没有。还有足够的可用空间。

如果（显着数量的）内存在 GC 调用中持续存在，那么您确实存在内存泄漏。

将 $display 分配给 null 以使其可收集（垃圾收集）。

这只是不必要的。 $display 不会在内部函数中访问，因此在 init 执行后可以进行 gc'ing。重新分配它不会改变这一点。