💡 Совет

Управление памятью и сборка мусора в JS

05.03.2026 1 минута чтения

JavaScript автоматически управляет памятью через Garbage Collector (GC). Разработчику не нужно вручную освобождать память, но нужно понимать, как GC решает, что объект можно удалить, чтобы избегать утечек.

Алгоритм пометки (Mark and Sweep)

Современные движки (V8, SpiderMonkey) используют алгоритм «Reachability» (Достижимость). Объект считается «мусором», если на него нет ссылок из корня (root). Корнями являются глобальный объект window, стек вызовов функций и т.д.

function leak() {
  let data = new Array(1000000);
  // Если data не вернуть и не сохранить глобально, 
  // после выхода из функции она станет недостижимой
}
leak(); // Память освободится

Проблемы возникают, когда ссылки сохраняются непреднамеренно.

Типичные утечки памяти

  1. Глобальные переменные: Случайное создание свойств на window.
  2. Таймеры и колбэки: Забытый setInterval или слушатель событий на элементе, который удален из DOM.
  3. Замыкания: Как обсуждалось ранее, длинные замыкания удерживают контекст.
// Пример утечки через слушатель
const btn = document.getElementById('btn');
btn.addEventListener('click', function heavyHandler() {
  // Логика
});
// Если btn удалить из DOM, но не удалить слушатель (removeEventListener),
// heavyHandler и всё, что он замыкает, останется в памяти.

Инструменты диагностики

В Chrome DevTools вкладка Memory позволяет делать снимки (Heap Snapshots). Сравнивая снимки до и после действия, можно найти объекты, которые не были удалены. Ищите растущее количество деташедных (detached) DOM-элементов.
Регулярный профайлинг помогает находить утечки до того, как пользователи начнут жаловаться на тормоза.

Экспертное мнение Алексей

В веб-разработке с 2012 года. Специализируюсь на PHP, JavaScript и архитектуре высоконагруженных проектов. Автор статей по оптимизации, API и базам данных.

Все статьи автора →
Telegram VK Twitter
Читайте также
Оптимизация DOM: Reflow и Repaint
Оптимизация DOM: Reflow и Repaint
Браузер отрисовывает страницу в несколько этапов. Изменение стилей или структуры DOM может запускать дорогие процессы пересчета. Понимание Reflow и Repaint...
Зачем нужны косые кавычки в коде
Зачем нужны косые кавычки в коде
Косые кавычки, или обратные апострофы (template literals), появились в JavaScript с ES6 и значительно упростили работу со строками. Они позволяют...