Sobes.tech
Senior

Моё таблица бо 10,000 сатр дорад, ки ҳангоми расмӣ кардан ба сустӣ меафтад. Ин чаро рӯ медиҳад ва чӣ гуна бояд ислоҳ кард?

sobes.tech AI

Ҷавоб аз AI

Отрисовка таблицы с 10 000 строк вызывает лаги из-за большого количества DOM-элементов, что сильно нагружает браузер и замедляет рендеринг.

Как исправить:

  • Виртуализация списка (виртуальный скролл) — отрисовывать в DOM только видимую часть таблицы, подгружая строки по мере прокрутки.
  • Пагинация — разбить данные на страницы, показывая ограниченное число строк за раз.
  • Оптимизация рендеринга — использовать мемоизацию, избегать лишних перерисовок.

Пример использования виртуального скролла с React и react-window:

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

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

<List
  height={500}
  itemCount={10000}
  itemSize={35}
  width={300}
>
  {Row}
</List>