Question

我正试图解决这个问题 - 当我在性能监视器中检查我的网站时，为什么DOM节点会继续上升。

我添加了这个只是循环的简单代码：

1）在包装中添加和元素， 2）用click事件绑定它。 3）删除它。

但是DOM节点总是在我检查性能上。有什么想法吗？

<!DOCTYPE html>
<html>
<head>
    

    <title></title>
    <style>
        .wrap{
            font-size:50px;
        }
    </style>
</head>
<body >
    <div class="wrap">
        <div></div>
    </div>
    

   <script>
       var counter = 0;

       setInterval(function () {

           //increase counter (for display) 
           counter++;

           //get wrap 
           var wrap = document.getElementsByClassName("wrap")[0];

           //remove its children
           while (wrap.firstChild) {
               wrap.firstChild.removeEventListener("click", onclick);

               wrap.removeChild(wrap.firstChild);
           }

           //create new element 
           var div = document.createElement("div");        // create a div element
           div.innerHTML = 'hello mosh (' + counter + ')';
           
           //bind events
           div.addEventListener("click", onclick);

           // append the div to wrap
           wrap.appendChild(div);                                



       }, 200);

       //on click function
       var onclick = function () { alert('click'); }

   </script>
</body>
</html>

Answer 1

v8引擎被垃圾收集，删除的DOM元素不会立即被销毁。偶尔使用未使用（不可到达）的对象进行垃圾收集。

如果我等了足够长的时间，使用你的代码，我确实看到DOM节点恢复到原始值（必须将间隔提高到20以加快进程）。

因此，不删除DOM元素通常更有效，而只是替换HTML内容。

<!DOCTYPE html>
<html>
<head>
    

    <title></title>
    <style>
        .wrap2 {
            font-size:50px;
        }
    </style>
</head>
<body >
    <div class="wrap2">
        <div></div>
    </div>
    

   <script>
       var counter = 0;
       var wrap = document.getElementsByClassName("wrap2")[0];
       var div = wrap.getElementsByTagName("div")[0];

       setInterval(function () {

           counter++;

           div.innerText = 'hello mosh (' + counter + ')';
           
       }, 20);

       //on click function
       var onclick = function () { alert('click'); }

   </script>
</body>
</html>

Chrome - 性能监视器 - DOM节点继续堆叠

1 个答案: