QUESTION: Що таке memory leaks?

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

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

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

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

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