Turime lentelę su 10 000 eilutėmis, kuri pradeda lėtėti piešiant. Kodėl tai vyksta ir kaip tai ištaisyti?

Atvaizduojant lentelę su 10 000 eilutėmis, dėl didelio DOM elementų skaičiaus gali būti vėlavimų, kurie labai apkrauna naršyklę ir sulėtina atvaizdavimą.

Kaip tai ištaisyti:

• Sąrašo virtualizavimas (virtualus slinkimas) — atvaizduoti tik matomą lentelės dalį DOM, įkeliant eilutes, kai slenkate.
• Puslapiavimas — padalinti duomenis į puslapius, rodyti ribotą eilutžių skaičių vienu metu.
• Atvaizdavimo optimizavimas — naudoti memoizaciją, išvengti nereikalingų pervaizdų.

Pavyzdys, kaip naudoti virtualų slinkimą su React ir react-window:

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

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

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