Что такое DOM Node Count в инструментах разработчика инструментов разработчика Chrome Chrome?

Question

Я получаю «Aw, snap!». хром, когда загружается определенная веб-страница. Я стараюсь изо всех сил выяснить, что вызывает его и очень тяжело.

В инструменте разработчика Chrome есть вкладка «Память», и при просмотре счетных графов я замечаю, что линия подсчета узлов DOM поднимается, падает, а затем продолжает расти.

я понял, что это означает, что подсчет элементов DOM на моей странице увеличивались, но после выполнения

document.getElementsByTagName("*").length 

в консоли я заметил, что значение не меняется.

Итак, что такое фактический график граф DOM? Если он будет продолжать расти, возможно, это может стать причиной «Aw, snap!». врезаться?

Answer 1

График подсчета узлов узла DOM показывает количество созданных узлов DOM, которые все еще хранятся в памяти, т. Е. Еще не были собраны мусор. Это не должно совпадать с элементами, которые вы получаете через getElementsByTagName. В последнем случае вы также получите только элементы, прикрепленные к дереву документов. Он не получит никаких «автономных» элементов, к которым у вас все еще есть ссылки.

Простой способ застрять в этом конкретном росте пирамиды - это вид виджетов API Facebook, который содержит некоторый код на таймере выбега, который создает лодку дополнительных узлов DOM.

Answer 2

Узлы DOM, которые все еще хранятся в памяти, являются так называемыми отсоединенными узлами. Это означает, что они не отображаются в дереве DOM вашей страницы, но какой-то код JavaScript все еще ссылается на них. Прочтите эту статью в разделе google dev, в которой объясняется, что узлы DATA с простым кодом и как их обнаружить с помощью Chrome DevTools: https://developers.google.com/web/tools/chrome-devtools/memory-problems/