PassFront
  1. PassFront
  2. База знаний
  3. Производительность в JS

Сравни способы решения утечки памяти и объясни, когда выбирать каждый вариант.

Производительность в JS

Утечки памяти устраняют, находя и убирая ссылки, удерживающие ненужные объекты: очистка таймеров и обработчиков, разрыв замыканий, `WeakMap`/`WeakSet`, профилирование памяти.

Частые причины утечек

  • Забытые таймеры/интервалы — setInterval без clearInterval.
  • Неудалённые обработчики событий — addEventListener без removeEventListener.
  • Замыкания, удерживающие большие объекты.
  • Глобальные переменные и растущие кеши.
  • Ссылки на удалённые DOM-узлы (detached nodes).

Способы решения

Очистка ресурсов

// React
useEffect(() => {
  const id = setInterval(tick, 1000);
  window.addEventListener('resize', onResize);
  return () => {
    clearInterval(id);
    window.removeEventListener('resize', onResize); // очистка!
  };
}, []);

WeakMap / WeakSet

Слабые ссылки не мешают сборке мусора — для кеша/метаданных, привязанных к объектам:

const cache = new WeakMap(); // запись исчезнет, когда объект-ключ соберётся

Ограничение кешей

LRU-кеш вместо бесконечно растущего.

Обнуление ссылок

Явно = null для больших объектов, когда больше не нужны.

Диагностика

  • DevTools → Memory: heap snapshots, сравнение, поиск detached nodes.
  • Performance — рост памяти во времени.

Как выбирать

  • Таймеры/обработчики → очистка (cleanup).
  • Кеш по объектам → WeakMap.
  • Растущий кеш → LRU/лимит.
  • Поиск утечки → профилирование heap.

Коротко для собеседования

Утечки устраняют: очищать таймеры (clearInterval) и обработчики (removeEventListener, cleanup в useEffect), не держать ссылки в замыканиях/глобалях, использовать WeakMap/WeakSet для кеша по объектам, ограничивать кеши (LRU). Ищут через DevTools Memory (heap snapshots, detached nodes).

Другие вопросы раздела