Как я могу найти утечку памяти в моем Javascript?

Question

У меня есть приложение, которое отображает таблицы данных в постраничном формате.Нажатие на кнопку «страница» повторно отображает таблицу.(Это не HTML-страницы - это просто кнопки, которые заново заполняют мою таблицу новой "страницей" данных). К каждой ячейке таблицы прикреплены обработчики событий.

Для всех намерений и целей, еслиприложение запускается на «Страница 1», я нажимаю «Страница 2», а затем нажимаю «Страница 1», состояние приложения СЛЕДУЕТ быть идентичным состоянию начального условия.

Итакпока, очень хорошо.

К сожалению, я замечаю (в Chrome, Firefox и т. д.), что после нажатия на разные «страницы» мое приложение теряет память.

Чтобы попытаться найтииз-за этого я нажал на 20 "страниц", а затем установил, что должно быть единственным глобальным контроллером, который я использую, равным нулю.

Это очень мало повлияло на потребление памяти.

Затем я попытался вызвать

document.body.remove();

Конечно, это убрало элемент body, оставив меня без HTML.

Приложение все еще потребляет 20 МБ памяти (Chrome).

Я в растерянности.Когда я удалил свой глобальный объект контроллера, на него больше не должно быть ссылок.Поскольку это также единственное место, которое содержит ссылки на мои данные, а также все мои функции, память должна быть освобождена.

Когда я делаю снимок кучи, я вижу это:

Конструктор- Счетчик ссылок - Размер

Object  95570   17.69MB
Array   126652  6.14MB
(closure)   72457   5.57MB
klass   57959   1.55MB
String  47461   1.26MB
Arguments   34780   1.06MB
HTMLTableCellElement    15146   709.19KB
HTMLInputElement    14624   685.48KB
(code)  3042    616.88KB
HTMLElement 10459   490.25KB
Variety 2027    132.48KB
HTMLTableRowElement 1242    57.44KB
(anonymous) 11  47.64KB
(global property)   1557    12.16KB
HTMLTableSectionElement 80  2.19KB
HTMLTableElement    41  1.90KB
RegExp  29  1.70KB
HTMLDivElement  46  1.26KB
Console 2   460B
Error   19  456B
d   18  360B
subclass    8   224B
MathConstructor 3   156B

Подавляющее большинство этих ссылок являются замыканиями (я использую их в своих обработчиках событий).Как мне найти утечку памяти?

Answer 1

Я не смог определить источник утечки - поэтому мое решение заключалось в том, чтобы вместо повторной генерации обработчиков событий DOM + таблицы при каждом щелчке страницы я менял значения элементов в таблице, оставляяDOM нетронут.

Мораль этой истории, похоже, заключается в том, что вы должны быть очень осторожны с кодом, который генерирует элементы DOM + обработчики событий - и проверять его на утечки, прежде чем он станет слишком сложным.

Answer 2

я использую drip для обнаружения, т. Е. Утечки памяти

Answer 3

Примечание: вы ничего не удаляете, вы только удаляете что-то из дерева документов.Удаленный узел (тело) по-прежнему является DOM-узлом (например, будет возвращен Node-> removeChild (), я полагаю, это то, что прототип использует в remove ())

Я думаю, что нет DOM-Метод удаления узла.

Возможно, вы могли бы попробовать что-то еще, чтобы освободить часть памяти, например, создать DOM-Range, выбрать Node (тело) и удалить содержимое Range ().

В этот момент мне в голову не приходит другой «законный» метод, в данном случае я бы не предложил использовать innerHTML.