Можешь описать основные причины утечек памяти в JavaScript приложениях и объяснить, как ты бы их выявил с помощью инструментов разработки?

Обзор

Утечки памяти в JavaScript происходят, когда приложение сохраняет ссылки на объекты, которые больше не нужны, что препятствует сборщику мусора освободить эту память.

Частые причины

• Случайные глобальные переменные — переменные, объявленные без let, const или var, привязываются к объекту window и никогда не собираются
• Забытые таймеры и интервалы — колбэки setInterval или setTimeout, которые никогда не очищаются с помощью clearInterval / clearTimeout
• Неудалённые слушатели событий — слушатели, прикреплённые к DOM-элементам, которые больше не нужны, но всё ещё держат ссылки
• Замыкания над большими областями видимости — замыкание, которое случайно сохраняет ссылку на большую внешнюю переменную, держа её в памяти дольше, чем ожидается
• Отсоединённые узлы DOM — элементы, удалённые из DOM, но всё ещё доступные через переменные JavaScript
• Циклические ссылки — объекты, ссылающиеся друг на друга по кругу, что может вызвать проблемы в старых движках JavaScript

Как их выявить

Используй DevTools браузера для анализа:

• Вкладка Memory — делай снимки кучи и сравнивай их во времени; ищи объекты, которые продолжают расти без видимой причины
• Вкладка Performance — запиши сессию и посмотри на график памяти; постоянно растущая линия указывает на утечку
• Фильтруй снимки кучи по Detached, чтобы найти отсоединённые узлы DOM
• Используй инструмент Allocation instrumentation on timeline, чтобы отследить, какие функции выделяют память, которая никогда не освобождается

Лучшие практики для предотвращения утечек

• Всегда очищай таймеры: clearInterval(id)
• Удаляй слушатели событий при уничтожении компонентов: element.removeEventListener(...)
• Избегай сохранения ненужных ссылок внутри замыканий
• Используй WeakMap или WeakRef, когда держишь необязательные ссылки на объекты