Что такое Memory Leak

Ответ

Memory leak — это ситуация, когда приложение продолжает удерживать память, которая больше не нужна, вместо того чтобы освободить её для сборщика мусора (Garbage Collector). Это приводит к постепенному увеличению потребления памяти и может вызвать замедление или падение приложения.

Частые причины во фронтенде:

  1. Неудалённые слушатели событий (addEventListener без removeEventListener)
  2. Замыкания, сохраняющие ссылки на большие объекты
  3. Утечки в SPA (например, неочищенные подписки RxJS, интервалы)

Пример утечки:

const hugeArray = new Array(1000000).fill('data');

// Замыкание сохраняет ссылку на hugeArray
function createLeak() {
  const localData = hugeArray;
  return function() {
    console.log(localData.length);
  };
}

// leakedFunc продолжает держать ссылку на hugeArray
const leakedFunc = createLeak();

Как избегать:

  • Используйте WeakMap/WeakSet для хранения временных данных
  • Всегда очищайте таймеры (clearTimeout) и подписки (unsubscribe)
  • В React используйте useEffect с cleanup-функциями

Ответ 18+ 🔞

Да ты посмотри, что творят-то, блядь! Сидит себе фронтендер, пыхтит, пишет красоту, а приложение через час как сонная муха — память жрёт, как не в себя, и накрывается медным тазом. Это, сука, memory leak называется! По-нашему — утечка памяти, когда твоя програнь забывает, что можно мусор выкинуть, и тащит в дом всякий хлам, который уже не нужен.

Откуда эта хуйня обычно лезет, а?

  1. Слушатели событий, которые навешали, а снять забыли. Как тот гость, который пришёл на пятёрочку и остался на год. addEventListener вызвал — removeEventListener подавился, блядь.
  2. Замыкания, эти хитрожопые суки. Захватят они в свои лапы какой-нибудь здоровенный массив и не отпускают, даже если он уже давно в прошлой жизни был нужен.
  3. В этих ваших модных SPA-приложениях — подписки на RxJS, которые висят, как сопли, или интервалы, которые тикают, даже когда страницу на хуй закрыли.

Вот, смотри, как это выглядит в коде, ёпта:

const hugeArray = new Array(1000000).fill('data'); // Массив на миллион строк, ни хуя себе!

// А вот и замыкание-ловушка, хитрая жопа
function createLeak() {
  const localData = hugeArray; // Ёбта, схватила и не отпускает!
  return function() {
    console.log(localData.length); // А эта функция теперь тащит за собой весь этот воз!
  };
}

// И пошло-поехало, утечка пошла
const leakedFunc = createLeak();
// Теперь leakedFunc, сука, держит за шкирку тот здоровенный hugeArray до скончания веков.

Как с этим бороться, чтобы не охуеть?

  • WeakMap с WeakSet'ом — это твои лучшие друзья для временных данных. Они не держат мёртвой хваткой, отпускают, когда надо.
  • Всё за собой прибирай, как в бане! Таймеры (clearTimeout), подписки (unsubscribe) — всё нахуй отменяй, когда компонент или модуль помирает.
  • В React'е не будь распиздяем — в useEffect всегда возвращай cleanup-функцию, чтобы поубирать за собой тот бардак, который наворотил.

Вот и вся наука, блядь. А то напишут кучу кода, а потом удивляются — «ой, что-то браузер тормозит». Да потому что память вся в соплях, вот что!