Я создавал большое одностраничное приложение и недавно изучал утечки памяти в JS. И я думаю, что у меня утечка памяти, потому что, поскольку я использую функцию "Профили" (Snapshot) в Chrome, я вижу, что у меня много отдельных элементов DOM.
Вот упрощенная версия моей установки:
<div id="container">
<div class="buttons">
<a class=".btn" href="/someurl/"> Button A</a>
<a class=".btn" href="/someurl/"> Button B</a>
<a class=".btn" href="/someurl/"> Button C</a>
</div>
<div class="ajaxHolder"></div>
</div>
Итак, если пользователь нажимает кнопку A, например, я бы использовал вызов AJAX для загрузки содержимого в .ajaxHolder
. Что-то вроде этого:
//This is the content...
<div class="contentA">
<p>some text...</p>
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
</div>
У меня также есть две функции внутри моего файла MAIN script. Это будет так:
//Click event bound to a.btn which tigger the ajax call
$(.buttons).on('click', '.btn', function(){
//Do ajax here...
//on success...
var holder = $(".ajaxHolder");
holder.children().off().remove(); // Is this the way to do this??
holder.off().empty(); //I don't think I need .off() here, but I guess it can't hurt...
holder.append(ajaxSuccessData);
});
Пока все хорошо. Но теперь, когда содержимое загружено, у меня также есть эта функция внутри моего MAIN script файла:
//So here, I am binding an event to the checkboxes...
$(".ajaxHolder").on('change', '.checkbox', function(){
//Do something...
});
Итак, теперь, если пользователь нажимает кнопку B, например, .ajaxHolder
опустеет, но все те события, привязанные к моим флажкам, похоже, скручиваются, потому что они появляются в отдельном дереве DOM.
Что мне здесь не хватает? Как я могу убедиться, что у меня нет каких-либо отдельных элементов DOM, в одностраничном приложении, выполняющемся следующим образом?
ВОПРОС БОНУСА: У меня много событий, связанных так:
$(".ajaxHolder").on('someEvent...','.someClass....', someFunction());
То есть все всегда привязано к моему .ajaxHolder
, потому что я должен использовать делегирование событий, поскольку .ajaxHolder
всегда будет существовать, тогда как другие загружаемые элементы не всегда будут существовать, поэтому я не могу просто сделать $(button).on('click')...
и т.д.
Итак, это правильный способ сделать это? Есть ли ограничение на количество вещей, которые я могу прикрепить к этому .ajaxHolder
, или нет проблем с этим?
EDIT: вот изображение моей консоли, если это вообще помогает.