Що таке memory leaks?

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

Основна причина криється в незвільненій пам'яті, коли вбудований збирач сміття фізично не може видалити об'єкт, оскільки на нього досі існують активні посилання. Частою причиною виникнення подібних проблем стають випадкові або навмисні глобальні змінні, які оголошуються без ключових слів var, let або const, або прив'язуються до об'єкта window в несуворому режимі. Через це такі дані живуть протягом усього життєвого циклу сторінки.

Ще одним поширеним джерелом витоків є забуті таймери та слухачі подій. Якщо ви використовували функції на кшталт setInterval або додали addEventListener до будь-якого елемента DOM, а потім видалили сам елемент зі сторінки, але забули викликати clearInterval або removeEventListener, то функція зворотного виклику та пов'язані з нею замкнуті змінні залишаться в пам'яті назавжди.

Особливу увагу розробникам варто приділяти замиканням, які захоплюють DOM-елементи. Якщо внутрішня функція посилається на елемент інтерфейсу, цей елемент не буде видалено з пам'яті навіть після його зникнення з дерева документа, оскільки контекст виконання продовжує містити на нього посилання.

Для ефективного пошуку та усунення подібних проблем професійні розробники використовують спеціалізовані вбудовані інструменти. Чудовим прикладом є панель Chrome DevTools Memory, де можна робити знімки купи, порівнювати їхній стан до і після певних дій користувача та знаходити від'єднані DOM-вузли, що залишилися в пам'яті, або неочищені структури даних.