Что такое DOM Node Count в google chrome инструменты разработчика timeline memory view?

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

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

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

document.getElementsByTagName("*").length

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

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

Ответ 1

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

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

Ответ 2

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