Как использовать панель Memory для поиска утечек памяти в JavaScript?

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

Основным инструментом для анализа является снимок кучи, который можно получить, выбрав опцию Heap snapshot и нажав кнопку создания снимка. Рекомендуется делать как минимум два снимка для сравнения: первый в исходном состоянии приложения, а второй после выполнения определенных пользовательских действий, которые потенциально вызывают утечку, например, открытия и закрытия модального окна.

После создания снимков вы можете переключить режим отображения с Summary на Comparison, чтобы увидеть разницу между состояниями памяти. Это позволяет отфильтровать объекты, которые были созданы и остались в памяти, но не были уничтожены после завершения операций. Обратите внимание на столбец Delta, который показывает прирост количества объектов конкретного класса.

Кликнув по подозрительному объекту, вы можете изучить так называемые пути удержания в нижней части экрана. Граф путей показывает, какие именно ссылки удерживают объект в памяти и не дают сборщику мусора очистить его. Найдя эту корневую ссылку, вы сможете исправить код, удалив ненужные обработчики событий или глобальные ссылки, которые блокируют освобождение ресурсов.