Chrome - Performance Monitor - DOM-узлы продолжают укладываться - PullRequest
Новая
       7

Chrome - Performance Monitor - DOM-узлы продолжают укладываться

0 голосов
/ 09 мая 2018

Я пытаюсь разобраться - почему DOM-узлы продолжают работать, когда я проверяю свой веб-сайт в Performance Monitor.

Я добавил этот простой код, который просто зацикливается на:

1) добавление и элемент для переноса, 2) связать его с событием щелчка. 3) удаляя его.

но все же DOM-узлы всегда работают, я проверяю производительность. Какие-нибудь мысли?

image showing the issue and the monitor

<!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>

1 Ответ

0 голосов
/ 09 мая 2018

Движок v8 собирает мусор, удаленные элементы DOM не уничтожаются немедленно. Изредка неиспользуемые (недоступные) объекты собираются мусором.

Если я подожду достаточно долго с вашим кодом, я увижу, что DOM-узлы возвращаются к исходному значению (пришлось увеличить интервал до 20, чтобы ускорить процесс).

v8 gc

По этой причине зачастую более эффективно не удалять элементы 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>

v8 gc

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...