Как отлавливал утечки памяти?

Утечки памяти отлавливают через DevTools Memory: heap snapshots (сравнение до/после), timeline записи роста памяти, поиск detached DOM-узлов, а также анализ типичных причин (таймеры, обработчики, замыкания).

Инструменты и подход

DevTools → Memory

#### Heap Snapshots (снимки кучи)

Сделать снимок, выполнить действие (открыть/закрыть компонент), сделать ещё снимок, сравнить:

Snapshot 1 → действие → Snapshot 2 → Comparison

Растущие объекты, которые не освобождаются, — кандидаты на утечку.

#### Allocation Timeline

Запись выделения памяти во времени — видно, что накапливается и не собирается.

#### Detached DOM nodes

В снимке искать «Detached» узлы — удалённые из DOM, но удерживаемые ссылками:

Фильтр "Detached" в heap snapshot

Performance Monitor

Наблюдать за метриками (JS heap size, DOM nodes, listeners) в реальном времени — стабильный рост = утечка.

Performance (timeline)

Запись с memory-графиком: если память растёт и не падает после GC — утечка.

Типичные причины для проверки

• Забытые таймеры/интервалы.
• Неудалённые обработчики событий.
• Замыкания, удерживающие большие объекты.
• Растущие кеши/коллекции.
• Detached DOM-узлы.

Процесс

1. Воспроизвести сценарий (повторять действие).
2. Снимки до/после, сравнить.
3. Найти растущие объекты/detached узлы.
4. Проследить, что их удерживает (retainers).
5. Исправить (очистка ресурсов, WeakMap).

Коротко для собеседования

Утечки отлавливают в DevTools Memory: heap snapshots (снимок → действие → снимок → сравнение растущих объектов), поиск detached DOM-узлов, Allocation Timeline, Performance Monitor (рост JS heap/listeners). Утечка — память растёт и не падает после GC. Проверяют типичные причины (таймеры, обработчики, замыкания, кеши) и retainers (что удерживает объект).