Мы заметили огромное количество узлов DOM и увеличение памяти в нашем приложении Angular, и в наших усилиях по его отладке мы сократили все . В итоге мы получили следующий чистый код html и javascript, который демонстрирует проблему.
Пожалуйста, следуйте следующему простому фрагменту кода.
<!DOCTYPE HTML>
<html>
<head>
</head><body></body></html>
Загрузить это сниппет на Chrome и откройте монитор производительности Chrome, щелкните значок «Сбор мусора» и увидите счетчик узлов DOM. Это должно быть 6.
Давайте просто добавим <input> следующим образом:
<!DOCTYPE HTML>
<html>
<head>
</head><body><input></body></html>
Перезагрузите фрагмент на новой вкладке и сосчитайте узлы DOM, должно быть 9.
Затем запустите это в консоли, чтобы удалить <input>
document.getElementsByTagName('input')[0].remove()
Количество должно быть 6, как и ожидалось.
Наконец, перезагрузите обрезанный на Снова новая вкладка. Убедитесь, что узлы DOM показывают 9, а затем введите текст в поле <input>. Вы заметите, что узлы DOM увеличиваются на единицу, достигая 10, это введенный #text, который добавляется в дерево DOM. Пока все хорошо.
Теперь давайте удалим <input>, как и раньше, с:
document.getElementsByTagName('input')[0].remove()
Посмотрите на DOM-узлы, они по-прежнему равны 10, как будто ничего не было удалено.
Есть мысли?