javascript - 使用适当的 GC 删除 DOM 节点(无泄漏)

Question

问题

添加节点，同时从 DOM 中删除旧节点，不会从内存中丢弃旧节点。 (至少不是全部，没有明显的原因)。

如何看待这种情况

(你已经知道了，但无论如何..)
右键单击输出区域并使用 Chrome 开发人员工具进行检查。单击时间轴 选项卡，然后单击左上角的圆圈(点)开始录制。

现在点击 body 元素，它将开始每 300ms 添加和删除项目
(删除的节点应该被垃圾收集)。

停止记录，将数据采样区域扩展到最大，您将在屏幕的下半部分看到绿色的节点。预期的图形将上下波动(其中向下表示节点已被 GC 正确丢弃)。

测试页面

这2个测试页面非常原始。当然，在现实生活中，开发人员使用生成大量文本的模板，这些文本应转换为 DOM 并注入(inject)到页面中，因此内存中的事件 DOM 节点数量应保持较低，并且删除必须 被丢弃。

使用 jQuery - http://jsbin.com/lamigucuqogi/2/edit - 大约 40 秒后，GC 变得疯狂并停止收集已删除的节点，这会导致通货膨胀。

朴素的方式 - http://jsbin.com/riref/2/edit - 此外，节点似乎没有以令人满意的速度被删除，而且数量还在不断增长......

问题

为什么会发生这种情况，应该如何正确移除 NODES 才能避免膨胀？

Answer 1

你错了。如果您让示例运行很长一段时间，然后使用 Dev Tools 时间线中的垃圾桶图标强制进行垃圾回收，您将观察到节点已被释放。

与任何其他 JavaScript 对象一样，当 DOM 节点无法从 GC Roots 访问时，它们就符合 GC 的条件。 .如果您不保留对已删除节点的任何其他引用(例如，在数组中)，一旦从主文档中删除，它们将变得不可访问。

但是，它们不会立即被垃圾回收 - GC 运行可能需要时间，在此期间主浏览器线程被阻塞，因此它只会定期运行。您看到的是 JavaScript 引擎决定不运行垃圾收集器的时间段。您不必为此担心 - 您的代码确实允许垃圾收集器在最终运行时释放内存。

强烈推荐观看 - Addy Osmani's memory management masterclass .