Как избежать утечек памяти в js?

Question

Утечки памяти в JS возникают, когда объекты, которые больше не нужны, не удаляются сборщиком мусора, потому что на них остаются ссылки. Чтобы этого избежать, нужно: 1) Убирать слушатели событий (Event Listeners) с DOM-элементов при их удалении. 2) Не хранить ссылки на DOM-элементы в глобальных переменных или замыканиях дольше необходимого. 3) Осторожно работать с замыканиями и большими объектами, хранящимися в памяти. 4) В современных фреймворках (React, Vue) следить за отпиской от подписок (setInterval, WebSocket) в хуках жизненного цикла размонтирования.

YeaHub · Accepted Answer

JavaScript использует автоматическое управление памятью с помощью сборщика мусора (Garbage Collector, GC). GC удаляет объекты, на которые больше нет ссылок из "живых" объектов.Распространенные причины утечек памяти и их решение:Забытые таймеры и подписки:Проблема: setInterval, setTimeout или подписки на события (например, RxJS) продолжают работать и держать ссылки на объекты, даже если компонент, который их использовал, уже не нужен.Решение: Всегда очищайте таймеры и отписывайтесь от событий при уничтожении компонента.javascript// React пример с useEffect
useEffect(() => {
  const intervalId = setInterval(() => {}, 1000);
  const subscription = someObservable.subscribe();

// Функция очистки
  return () => {
    clearInterval(intervalId);
    subscription.unsubscribe();
  };
}, []);Отсоединенные DOM-элементы:Проблема: Если в переменной сохраняется ссылка на удаленный из DOM элемент, он не сможет быть собранным мусором.Решение: Обнуляйте ссылки на DOM-элементы после их удаления.javascriptlet element = document.getElementById('my-element');
// ... работа с элементом
element.remove(); // Удаляем из DOM
element = null;   // Удаляем ссылку из JSЗамыкания (Closures):Проблема: Замыкание может непреднамеренно удерживать ссылку на большую структуру данных или DOM-элемент, даже если используется лишь малая ее часть.Решение: Будьте внимательны, что захватывают ваши замыкания. После использования обнуляйте переменные, ссылающиеся на большие объекты.Глобальные переменные:Проблема: Объекты, хранящиеся в глобальных переменных, никогда не будут удалены.Решение: Избегайте глобальных переменных. Используйте локальные переменные и модули.Кеши без стратегии очистки:Проблема: Простой кеш в виде объекта или Map, который растет бесконечно.Решение: Реализуйте стратегии очистки кеша (например, LRU - "Least Recently Used" или ограничение по размеру).Вывод: Для предотвращения утечек памяти выработайте привычку всегда освобождать ресурсы (таймеры, подписки, ссылки на DOM) при разрушении объекта или компонента. Используйте инструменты разработчика (например, Memory Profiler в Chrome DevTools) для поиска и диагностики утечек.