Диагностика типа утечки Javascript

Question

У меня есть веб-страница с функцией «автообновление». При включении каждый второй страница извлекается через AJAX (так называемый page_request) и заменяет содержимое сНа контейнера с помощью прилагаемого containerid:

document.getElementById(containerid).innerHTML=page_request.responseText; 

Это работает большая часть времени, никаких проблем.

Проблема возникает тогда, когда следующий скрипт в page_response:

<script type=\"text/javascript\"> 
    $(document).ready(function() { 
     dtable = $('#multi-stat-table').dataTable(); 
    }); 
</script> 

Этот сценарий включает таблицу с идентификатором «мульти-стат стол» в сортировки таблицы с помощью DataTables JQuery плагин. Скрипт работает, и у меня есть сортируемые таблицы. Однако, если включено автоматическое обновление, происходит утечка памяти, которая в конечном итоге потребляет всю кучу (медленно, но верно).

Я вижу это явление, используя профилировщик памяти верхнего и хромированного типов. Каждая секунда, ~ 70 КБ данных выделяется, но освобождается только ~ 20 КБ. Следовательно, существует чистая потеря памяти в 50 Кбайт в секунду. Я просмотрел объекты в профилировщике, которые занимают память, но очень сложно понять из числа без описания, что на самом деле ссылаются на эти массивы и объекты. Я был не в состоянии понять, как сделать сборщик мусора собрать эти неиспользуемые объекты, которые накапливают каждый второй:

Я попытался установить dtable в нуль перед каждым автоматическим обновлением, но безрезультатно , Я также попытался вызвать dtable.api(). Clear() и dtable.api(). Destroy(), но утечка сохраняется. Как я могу найти эту утечку, и что еще более важно, что я могу сделать, чтобы остановить ее?

Answer 1

Я смог точно определить причину утечки памяти.

У меня возникла идея, что это может быть проблема кэширования jQuery, когда я просматривал профилировщик Chrome и видел, что объект кеша jQuery ссылался на объекты с 45 МБ объектов. После небольшого исследования, это статья, которую я прочитал, что помог мне понять, как это исправить: http://javascript.info/tutorial/memory-leaks#jquery-anti-leak-measures-and-leaks

Прежде чем я это делал: document.getElementById (containerid) .innerHTML = page_request.responseText; // Опасно, если что-то внутри контейнера ссылается jQuery позже!

После исправления: $ ("# container"). Html (page_request.responseText); // HTML() разыменовывает неиспользуемые объекты кэшированных внутри containerid

Примечание для себя: Это может быть опасно смешивать и сочетать JQuery и JQuery не-DOM