Comment optimiser le rendu d'une liste de 10 000 éléments sans pagination?

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

Пример с React и библиотекой react-window:

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Элемент #{index}</div>
);

const LargeList = () => (
  <List
    height={500} // высота контейнера
    itemCount={10000} // количество элементов
    itemSize={35} // высота одного элемента
    width={300} // ширина контейнера
  >
    {Row}
  </List>
);

Такой подход значительно снижает нагрузку на браузер и улучшает производительность, поскольку в DOM одновременно находится ограниченное число элементов.