Як використовувати панель Memory для пошуку витоків пам'яті в JavaScript?

Витоки пам'яті в додатках на JavaScript можуть призводити до плавного зниження продуктивності, зависань і навіть повного падіння вкладки браузера. Для діагностики та пошуку таких проблем використовується вкладка Memory в інструментах розробника. Вона дозволяє робити знімки стану пам'яті в певні моменти часу і детально аналізувати об'єкти, які займають оперативну пам'ять і не видаляються збирачем сміття.

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

Після створення знімків ви можете переключити режим відображення з Summary на Comparison, щоб побачити різницю між станами пам'яті. Це дозволяє відфільтрувати об'єкти, які були створені і залишилися в пам'яті, але не були знищені після завершення операцій. Зверніть увагу на стовпець Delta, який показує приріст кількості об'єктів конкретного класу.

Клікнувши по підозрілому об'єкту, ви можете вивчити так звані шляхи утримання в нижній частині екрана. Граф шляхів показує, які саме посилання утримують об'єкт у пам'яті і не дають збирачу сміття очистити його. Знайшовши це кореневе посилання, ви зможете виправити код, видаливши непотрібні обробники подій або глобальні посилання, які блокують звільнення ресурсів.