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>