Как очищать старые DOM-узлы при бесконечном скролле, чтобы не накапливать элементы в памяти?

Проблема накопления DOM-узлов

При бесконечном скролле каждый новый загруженный элемент добавляется в DOM. Если не удалять старые узлы, количество элементов растёт бесконечно, что приводит к увеличению потребления памяти и замедлению работы страницы. Браузер хранит все DOM-узлы, даже если они не видны, что может вызвать зависания и крахи.

Решение: виртуальный скроллинг

Виртуальный скроллинг — это техника, при которой рендерится только небольшое количество элементов, видимых в окне просмотра, плюс небольшой буфер сверху и снизу. При скролле старые элементы удаляются, а новые добавляются, переиспользуя DOM-узлы. Это позволяет работать с тысячами записей без потери производительности.

Пример реализации на JavaScript:

const container = document.getElementById('scroll-container');
const itemHeight = 50;
const buffer = 5;
let items = []; // массив данных

function render(startIndex) {
  container.innerHTML = '';
  const endIndex = Math.min(startIndex + buffer * 2, items.length);
  for (let i = startIndex; i < endIndex; i++) {
    const div = document.createElement('div');
    div.textContent = items[i];
    div.style.height = itemHeight + 'px';
    container.appendChild(div);
  }
}

container.addEventListener('scroll', () => {
  const scrollTop = container.scrollTop;
  const startIndex = Math.floor(scrollTop / itemHeight) - buffer;
  render(Math.max(0, startIndex));
});

В этом примере при скролле вычисляется, какие элементы должны быть видны, и рендерится только их небольшое количество. Старые узлы удаляются через innerHTML = ''.

Альтернативный подход: ручное удаление

Если виртуальный скроллинг не подходит, можно вручную удалять элементы, которые находятся далеко за пределами видимой области. Например, при добавлении новых элементов удалять первые N старых, сохраняя фиксированный лимит (например, 100 элементов).

const maxItems = 100;
const list = document.getElementById('list');

function addItem(text) {
  const li = document.createElement('li');
  li.textContent = text;
  list.appendChild(li);
  if (list.children.length > maxItems) {
    list.removeChild(list.firstChild);
  }
}

Этот подход проще, но менее эффективен для очень больших списков, так как DOM всё ещё содержит до 100 узлов.

Вывод

Для бесконечного скролла с большим количеством данных используйте виртуальный скроллинг — это стандартный способ избежать утечек памяти и обеспечить плавную работу. Для небольших списков (до нескольких сотен элементов) можно обойтись ручным удалением старых узлов.