Утечки памяти при удалении элемента из DOM часто возникают, если на этот элемент или связанные с ним объекты ссылаются обработчики событий, особенно если они хранятся в глобальных объектах и не удаляются.
Будет ли проблема с замыканием при добавлении и удалении обработчика `scroll`? Как `removeEventListener` понимает, какой именно обработчик нужно удалить?
Утечки памяти при удалении элемента из DOM часто возникают, если на этот элемент или связанные с ним объекты ссылаются обработчики событий, особенно если они хранятся в глобальных объектах и не удаляются.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Утечки памяти при удалении элемента из DOM часто возникают, если на этот элемент или связанные с ним объекты ссылаются обработчики событий, особенно если они хранятся в глобальных объектах и не удаляются.
Чтобы избежать утечки:
- Перед удалением элемента из DOM обязательно снимайте все привязанные к нему обработчики событий с помощью
removeEventListener. - Если обработчик хранится в глобальном объекте, убедитесь, что вы удаляете ссылку на элемент внутри этого обработчика или полностью удаляете обработчик, если он больше не нужен.
- Используйте слабые ссылки (WeakMap/WeakSet) для хранения ссылок на DOM-элементы в глобальных объектах, чтобы сборщик мусора мог освободить память.
Пример удаления обработчика:
const handler = function(event) { /* ... */ };
const elem = document.getElementById('myElement');
// Добавляем обработчик
elem.addEventListener('click', handler);
// Когда нужно удалить элемент:
elem.removeEventListener('click', handler);
elem.parentNode.removeChild(elem);
// Если обработчик хранится глобально, очистите ссылку:
globalHandlers['myElement'] = null;
Таким образом, вы разрываете все ссылки на элемент и его обработчики, позволяя сборщику мусора освободить память.