Замыкания и функции: как избежать утечек памяти в браузере

Вы когда-нибудь замечали, что ваш сайт начинает тормозить после нескольких часов работы? Или память в DevTools растет бесконечно, хотя вы думаете, что всё освободили? Часто виноваты JavaScript closures (замыкания) - механизм языка, который сохраняет доступ к переменным внешней области видимости даже после завершения выполнения функции. Звучит пугающе? На самом деле, это просто логика, которую легко понять, если знать, где она подкалывает.

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

Что такое замыкание и почему оно важно для памяти

Closure - это функция, которая «запоминает» переменные из той области, где была создана, даже если эта область уже не активна. Например, если вы создаете функцию внутри другого блока, она может обращаться к переменным этого блока спустя секунды или минуты. Для движка JavaScript это означает, что он не может удалить эти переменные из памяти, пока существует ссылка на замыкание.

Проблема возникает, когда замыкание живет дольше, чем нужно. Если вы повесили обработчик события на элемент DOM, а потом удалили элемент, но забыли отписаться от события - замыкание продолжает жить, удерживая за собой все связанные данные. Браузер думает: «А вдруг эту функцию еще вызовут?» И ждет. Память занята. Утечка началась.

Типичные сценарии утечек через замыкания

Давайте посмотрим на три самых частых случая, которые встречаются в реальном коде.

1. Обработчики событий без очистки. Вы пишете element.addEventListener('click', handler). Функция handler ссылается на переменную counter из внешней области. Если вы удалите element из DOM, но не вызовете removeEventListener, то handler и counter останутся в памяти. В Chrome DevTools вы увидите, что объект element все еще доступен через цепочку ссылок от глобального объекта события.
2. Таймеры (setTimeout/setInterval). Если внутри таймера вы используете большие массивы или объекты, они будут держаться в памяти до момента срабатывания таймера. А если таймер был запланирован на 10 минут, а пользователь закрыл вкладку раньше - память не освободится до перезагрузки страницы (или пока не сработает таймер).
3. Глобальные ссылки на локальные объекты. Иногда разработчики случайно присваивают локальную переменную глобальной переменной (например, из-за опечатки в имени). Тогда замыкание, связанное с этой переменной, становится частью глобального пространства и никогда не будет удалено сборщиком мусора.

Как найти утечку: инструменты и методы

Угадывать, где утечка, - плохая идея. Лучше использовать инструменты. Вот базовый алгоритм диагностики:

• Chrome DevTools → Memory. Сделайте снимок памяти (Heap Snapshot) до действия (например, открытия модалки) и после закрытия. Сравните два снапшота. Ищите объекты, которые должны были исчезнуть, но остались. Обратите внимание на колонку «Retainers» - она показывает, кто удерживает объект.
• Performance Monitor. Следите за графиком JS Heap Size. Если он растет ступеньчато и не падает после действий пользователя - повод насторожиться.
• Консольные логи. Добавьте временные console.log в критических точках, чтобы убедиться, что функции вызываются ожидаемое количество раз. Если обработчик клика срабатывает дважды на один клик - возможно, вы добавили его несколько раз.

Лайфхак: в DevTools есть кнопка «Garbage Collect». Нажмите ее перед сравнением снапшотов, чтобы принудительно собрать мусор. Это поможет отличить реальные утечки от объектов, которые просто еще не успели быть удалены.

Стратегии предотвращения утечек

Предотвратить утечку проще, чем искать. Вот несколько правил, которые стоит ввести в привычку.

1. Всегда очищайте подписки

Если вы используете addEventListener, найдите время для removeEventListener. Особенно это касается компонентов в React, Vue или Angular. В React, например, используйте хук useEffect с функцией очистки в возвращаемой функции:

useEffect(() => {
  const handler = () => { /* логика */ };
  window.addEventListener('resize', handler);
  
  return () => {
    window.removeEventListener('resize', handler);
  };
}, []);

То же самое касается библиотек вроде RxJS или EventEmitter. Если создали подписку - уничтожьте ее при размонтировании компонента.

2. Используйте слабые ссылки там, где уместно

Иногда вам нужно сохранить связь между объектами, но не блокировать их удаление. Для этого существуют WeakMap и WeakSet. В отличие от обычных Map/Set, они не предотвращают сборку мусора. Если ключ в WeakMap больше нигде не используется, запись автоматически удалится.

Пример: если вы храните метаданные для DOM-элементов, используйте WeakMap. Когда элемент будет удален из DOM, запись в карте исчезнет сама по себе.

3. Избегайте замыканий в циклах без необходимости

Классическая ошибка: создание функций в цикле, которые ссылаются на переменную цикла. В старых версиях JavaScript (ES5) это приводило к тому, что все функции ссылались на последнее значение переменной. В ES6 с let проблема решена, но принцип остается: если замыкание создается в цикле, убедитесь, что оно действительно нужно для каждой итерации. Если нет - вытаскивайте логику наружу.

Сравнение подходов к управлению жизненным циклом

Практические советы для разных фреймворков

Если вы работаете с React, помните о том, что каждая ререндеризация может создавать новые функции. Если вы передаете новую функцию в дочерний компонент как проп, и этот компонент использует React.memo, то изменение ссылки на функцию приведет к повторному рендеру. Чтобы избежать лишних замыканий и утечек, используйте useCallback для стабилизации ссылок на функции, которые передаются вниз по дереву.

В Vue.js обращайте внимание на директивы v-on. Если вы используете стрелочные функции прямо в шаблоне (@click="() => doSomething()"), они создаются заново при каждом рендере. Лучше вынести логику в метод компонента и передавать ссылку на него.

В чистом JavaScript без фреймворков главное правило: минимизируйте живое пространство замыканий. Чем меньше переменных доступно внутри функции, тем меньше шансов, что что-то лишнее останется в памяти.

Частые ошибки новичков

• Забытый clearInterval. Вы запустили интервал для обновления данных, но не остановили его при уходе со страницы. Результат: бесконечный рост памяти и нагрузка на CPU.
• Циклические ссылки. Объект A ссылается на объект B, а B ссылается на A. Если ни один из них не доступен снаружи, сборщик мусора справится. Но если один из них висит на глобальном объекте - оба останутся навсегда.
• Дублирование обработчиков. Вы добавляете обработчик каждый раз при рендере компонента, но не удаляете старый. Через 10 рендеров у вас 10 одинаковых обработчиков, и каждый вызывает свою логику.

Как проверить, что утечка устранена

После внесения исправлений обязательно протестируйте изменения. Повторите сценарий, который вызывал утечку, и сделайте новый Heap Snapshot. Сравните его с предыдущим. Объекты, которые раньше оставались, теперь должны исчезнуть после сбора мусора. Если память стабильна или колеблется в пределах нормы - поздравляю, вы починили проблему.

Не забывайте, что небольшая вариация в размере памяти - это нормально. Движок JavaScript оптимизирует аллокации, и размер кучи может немного меняться. Главное - отсутствие постоянного роста.