Question

解释问题

所以我注意到在使用someElement.innerHTML时，DOM节点数会增加。

我猜这个引用已被终止，但是在垃圾收集器删除对象之前仍然会分配内存。

实施例（HTML）：

    <html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="test.css">
        <script src="script.js"></script>
    </head>
    <body onload="startTimer()">
        <div id="timeContainer">Time Goes Here</div>
    </body>

</html>

实施例（的JavaScript）：

 var timer;
 var body;
 var oldTime = "";
 var timeContainer;


 function startTimer(){
    timeContainer = document.getElementById("timeContainer");
    timer = setInterval(getTime, 10);
 }

function getTime(){
    var d = new Date();
    var timeString = d.getUTCHours() +":"+ d.getUTCMinutes(); +":"+ d.getUTCSeconds();

    if(timeString != oldTime){
        oldTime = timeString;
        timeContainer.innerHTML = timeString;
    }
}

到目前为止我尝试了什么

我尝试使用someElement.textContent。
每次刷新计时器并创建一个新计时器时，我都删除了whoe ParentElement

问题

当我只刷新内容时，我怎么能避免增加节点数量？为什么它还需要一个额外的节点呢？

Answer 1

我猜这个引用已被杀死，但仍然分配了内存直到垃圾收集器删除对象。

正确。

即使只是一次，我怎么能避免增加节点数令人耳目一新的内容？

你不能，也不应该担心。这是浏览器的域，它在垃圾收集方面做了它想做的事情（不同的浏览器可能会有不同的做法）。

每次刷新计时器时都删除了整个ParentElement 创造了一个新的

仅仅因为你删除了它（使其无法访问），并不意味着它立即被垃圾收集。

Answer 2

这是自然而且可取的。

浏览器垃圾收集异步运行。一旦你的实际DOM分离了节点，它就不能保证它们没有堆。他们将留在那里，直到下一次垃圾收集触发。

作为told in dev tools # Fix Memory Problems，不要担心它并将其留给垃圾收集过程。

请注意，只要它不会损害您的应用程序性能，请将其保留给GC。如果它真的推动你进入浏览器缓慢和混乱，你应该真正开始熟练并修复它。这可能是潜在的内存泄漏。

只有在页面的DOM树或JavaScript代码中没有对DOM节点进行引用时，才能对其进行垃圾回收。一个节点被称为＆＃34;分离＆＃34;当它从DOM树中删除但是一些JavaScript仍然引用它。分离的DOM节点是内存泄漏的常见原因。本节将教您如何使用DevTools＆＃39;堆分析器用于标识分离的节点。

使用Chrome Dev工具在同一篇文章中给出了修复。简而言之，拍摄堆的快照并开始查看分离的节点。

突出显示为黄色的节点可以从JavaScript代码直接引用它们。突出显示为红色的节点没有直接引用。它们只是活着的，因为它们是黄色节点树的一部分。通常，您希望专注于黄色节点。修复你的代码，使黄色节点的活动时间不超过它所需的时间，并且你还可以删除属于黄色节点树的红色节点。

设置innerHTML会增加HTML nodecount

解释问题

到目前为止我尝试了什么

问题

2 个答案: