使用适当的GC去除DOM节点（无泄漏） [英] Removing DOM nodes with proper GC (no leaks)

问题描述

问题

添加节点时，从DOM中删除旧节点时，不会从内存中丢弃旧节点。 （并非所有人都至少没有明显的原因）。

如何看到这种情况

（您已经知道这一点，但无论如何..）

右键单击输出区域并使用Chrome 开发人员工具进行检查。
点击时间线标签，然后点击左上角的圆圈（点）开始录制。现在点击正文元素，它会开始每隔 300ms

添加和移除项目（已移除的节点应该被垃圾收集）。 停止记录，将数据采样区域扩展到最大值，然后在屏幕的下半部分以绿色显示节点。预期的图表会上下移动（下降意味着节点已被GC正确丢弃）。

测试页面

这两个测试页面非常原始。当然，在现实生活中，开发人员使用的模板会生成大量的文本，应该将其转换为DOM并注入页面，因此内存中的活动DOM节点数量应该保持较低，并且必须将它们移除 must 被丢弃。

使用jQuery - - 此外，它似乎并没有以令人满意的速度删除节点，并且这个数字不断增长和增长...... https://i.stack.imgur.com/P9GOi.pngalt =在这里输入图片描述>

问题

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

解决方案

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

像其他任何JavaScript对象一样，当DOM节点无法从 GC Roots 。假设您不保留对已删除节点的任何其他引用（例如在一个数组中），则一旦从主文档中移除它们将无法访问。

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

强烈推荐查看 - Addy Osmani的内存管理大师课程。

The problem

Adding nodes, while removing the old ones from the DOM, doesn't discard the old nodes from memory. (not all of them at least, without apparent reason).

How to see this happening

(you already know this but anyway..)
right click the output area and inspect using Chrome developer tools. Click on the Timeline tab and then at the circle (dot) on the upper left side to start recording.

now click on the body element, and it will start adding and removing items every 300ms
(the removed nodes should be garbage collected).

Stop the recording, extend the data-sampling zone to maximum, and you will see on the bottom half of the screen, in green, the nodes. the expected graph would be going up and down (where down means nodes have been discarded properly by the GC).

Test pages

These 2 test pages are very primitive. of course in real life developers use templates which generates huge amount of text which should be converted into DOM and injected into the page, therefor the number of live DOM nodes in memory should be kept low, and removed ones must be discarded.

with jQuery - http://jsbin.com/lamigucuqogi/2/edit - After about 40 seconds the GC is getting crazy and stops collecting removed nodes, which causes inflation.

Naive way - http://jsbin.com/riref/2/edit - Also it seems nodes aren't being removed in a satisfying rate, and the number keeps growing and growing...

Question

Why is this happening, and how should one properly remove NODES so inflation won't occur?

解决方案

You are mistaken. If you leave the example running for a significant period of time, then use the garbage can icon in the Dev Tools timeline to force a garbage collection you will observe that the nodes are freed.

Like any other JavaScript object, DOM nodes become eligible for GC when they become unreachable from GC Roots. Provided you do not retain any other references to removed nodes (in an array, for example), they become unreachable once removed from the main document.

However, they are not garbage collected immediately - a GC run can take time, during which the main browser thread is blocked, so it only runs periodically. What you are seeing is a period during which the JavaScript engine has decided not to run the garbage collector. You shouldn't be concerned by this - your code does allow the garbage collector to free memory when it eventually runs.

Highly recommended viewing - Addy Osmani's memory management masterclass.

这篇关于使用适当的GC去除DOM节点（无泄漏）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！