Приведи пример утечки памяти

Пример утечки памяти в JavaScript

Утечка памяти — это ситуация, когда память, выделенная для объектов в программе, не освобождается, даже когда эти объекты уже не нужны. Это может привести к постепенному увеличению использования памяти, снижению производительности и даже к падению приложения, особенно в долгосрочных или однострадно запущенных приложениях, таких как веб-приложения на React или Angular.

Типичный пример в веб-приложении

Рассмотрим классический пример утечки памяти в JavaScript, связанный с неудаленными слушателями событий (event listeners) и замыканиями (closures).

// Пример компонента React (до версии 16.8, без хуков)
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
    this.handleExternalEvent = this.handleExternalEvent.bind(this);
  }

  componentDidMount() {
    // Добавляем слушатель события к глобальному объекту
    window.addEventListener('scroll', this.handleExternalEvent);

    // Создаем ссылку на DOM элемент, который может быть удален
    this.externalElement = document.getElementById('external-div');
    this.externalElement.addEventListener('click', this.handleClick);
  }

  handleExternalEvent() {
    // Используем данные состояния
    console.log('Scroll event:', this.state.data);
  }

  handleClick() {
    console.log('Click on external element');
  }

  componentWillUnmount() {
    // КРИТИЧЕСКАЯ УТЕЧКА: слушатель события на window не удаляется!
    // window.removeEventListener('scroll', this.handleExternalEvent);

    // Также не удаляем слушатель на externalElement
    // this.externalElement.removeEventListener('click', this.handleClick);
  }
}

Как возникает утечка

В этом примере утечка памяти происходит по нескольким причинам:

• Неудаленные слушатели событий: После удаления компонента (componentWillUnmount) слушатели scroll и click остаются активными. Они продолжают держать ссылки на методы компонента (handleExternalEvent, handleClick), которые, в свою очередь, ссылаются на состояние и свойства компонента. Это означает, что весь экземпляр класса MyComponent остается в памяти, даже если он уже не отображается в DOM.

• Замыкания и ссылки на DOM элементы: Переменная this.externalElement сохраняет ссылку на DOM элемент. Если этот элемент удаляется из DOM, но слушатель не удален, ссылка сохраняется, что может помешать браузеру полностью очистить память, связанную с этим элементом.

Более современный пример с хуками React

// Пример с использованием хуков (React 16.8+)
function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const handleResize = () => {
      // Замыкание, которое ссылается на состояние data
      console.log('Resize event, data:', data);
    };

    window.addEventListener('resize', handleResize);

    // Утечка: не предоставляем функцию очистки
    // return () => window.removeEventListener('resize', handleResize);
  }, []); // Пустой массив зависимостей - эффект выполняется только при монтировании

  return <div>My Component</div>;
}

Здесь утечка возникает потому, что эффект (useEffect) не возвращает функцию очистки. Слушатель resize остается на глобальном объекте window после unmount компонента. Замыкание handleResize продолжает ссылаться на переменную data из состояния, что предотвращает освобождение памяти, связанной с этим состоянием и самим компонентом.

Как предотвратить утечки памяти

• Всегда удалять слушатели событий: Использовать removeEventListener в методах жизненного цикла (componentWillUnmount, useEffect cleanup).
• Освобождать ссылки: Явно удалять ссылки на DOM элементы, большие объекты данных или сторонние библиотеки при unmount.
• Использовать инструменты разработчика: В Chrome DevTools можно использовать Memory Profiler и Performance Monitor для отслеживания утечек.
• Избегать глобальных хранилищ без очистки: Если данные хранятся в глобальных переменных или вне компонентов, предусматривать механизмы их очистки.

Утечки памяти особенно опасны в SPA (Single Page Applications), где пользователь может находиться часами без перезагрузки страницы. Регулярный аудит памяти и внимательное управление жизненным циклом компонентов — ключевые практики для устойчивого фронтенд-приложения.