Когда говорят про оптимизацию фронтенда, чаще всего думают о скорости загрузки или анимациях. Но есть ещё одна важная область — память.
- утечки замедляют приложение со временем
- на мобильных устройствах это может приводить к крашам
- стабильность UX напрямую зависит от того, как мы управляем памятью
Теперь давайте поговорим об основных источниках проблем
1️⃣Замыкания и долгоживущие ссылки
Частая ошибка — сохранять в замыкании большие объекты или DOM-элементы, которые уже не нужны. В итоге GC (сборщик мусора) не может их очистить.
Решение: не тащить в замыкания лишнее, по возможности использовать WeakMap/WeakSet для хранения.
2️⃣Неудалённые обработчики событий
Навесили addEventListener, но забыли removeEventListener. Опасно при работе с компонентами: удалённый компонент может остаться в памяти из-за висящего обработчика.
Решение: всегда отписываемся.
useEffect(() => {
const handler = () => console.log("scroll");
window.addEventListener("scroll", handler);
return () => {
window.removeEventListener("scroll", handler);
};
}, []);
3️⃣Таймеры и интервалы
Забытые setInterval или setTimeout продолжают жить, даже если компонент уже размонтирован.
Решение: чистим вручную.
const id = setInterval(() => doWork(), 1000);
// позже
clearInterval(id);
4️⃣Кэширование «без меры»
Иногда мы храним результаты в памяти (memoization, cache, global store), но не думаем про «старые» данные. В итоге кэш растёт бесконечно. Избыточное кэширование и мемоизация тоже могут быть вредны: на лёгких операциях выгоднее пересчитать заново, чем хранить всё в памяти.
Решение: использовать LRU cache или ограничивать размер хранения.
5️⃣Глобальные ссылки и синглтоны
Всё, что записано в глобальную область (window, global store), живёт всё время жизни приложения. Если туда положить тяжёлый объект, GC его никогда не удалит.
Решение: хранить только действительно нужное, очищать ссылки вручную, если объект больше не нужен.
6️⃣DOM-ссылки и оторванные узлы
Если держать ссылку на DOM-элемент, удалённый из документа, он остаётся в памяти. Особенно актуально при ручной работе с document.createElement.
Решение: обнулять ссылки после удаления узлов.
#оптимизации #react #frontend #память