Siirry pääsisältöön

Large Data Sets

Avaa ChatGPT:ssä

Virtuaalinen vieritys

Table-komponentti on suunniteltu käsittelemään suuria tietoaineistoja tehokkaasti hyödyntämällä virtuaalista vieritystä, joka on tekniikka, jota käytetään verkkosovelluksissa suurten luetteloiden tai taulukoiden renderoinnin ja suorituskyvyn optimointiin renderoimalla vain näytöllä näkyvät kohteet.

Alkuperäinen renderointi

Virtuaalinen vieritys on suunnittelumalli, jossa aluksi renderoidaan vain pieni valikoima kohteita, jotka mahtuvat vieritettävän säiliön näkyvään alueeseen. Tämä minimoi luotujen DOM-elementtien määrän ja nopeuttaa alkuperäistä renderointiprosessia.

Dynaaminen lataaminen

Kun käyttäjä vierittää alaspäin tai ylöspäin, uusia kohteita lisätään dynaamisesti näkymään. Nämä kohteet haetaan tyypillisesti tietolähteestä nykyisen vierityspaikan mukaan.

Kohteiden kierrätys

Sen sijaan, että luotaisiin uusi DOM-elementti jokaiselle kohteelle, virtuaalinen vieritys usein käyttää olemassa olevia DOM-elementtejä uudelleen. Kun kohde siirtyy näkymättömälle alueelle, sen DOM-elementti kierrätetään ja käytetään uudelleen uudelle kohteelle, joka tulee näkyvälle alueelle. Tämä kierrätysprosessi auttaa vähentämään muistinkäyttöä ja parantaa suorituskykyä.

Suorituskykyedut:

Virtuaalisen vierityksen pääetuna on parantunut suorituskyky, erityisesti suurten kohdemäärien käsittelyssä. Se vähentää DOM-manipulaation määrää ja lisää käyttöliittymän yleistä reagointikykyä.

Alla oleva Table näyttää kaikki olympiavoittajat - suuren tietoaineiston, joka hyötyy suuresti taulukon virtuaalisen vieritysomaisuuden toiminnallisuudesta:

Näytä Koodi

Ylikierros

Taulukon Overscan-ominaisuuden asettaminen määrittää, kuinka monta riviä renderoidaan näkyvän alueen ulkopuolella. Tämä asetus voidaan määrittää setOverscan(double value)-menetelmällä.

Korkeampi ylikierrosarvo voi vähentää renderoinnin tiheyttä vieritettäessä, mutta se tarkoittaa myös, että renderoidaan enemmän rivejä kuin on nähtävissä kerrallaan. Tämä voi olla kompromissi renderointisuorituskyvyn ja vierityksen sujuvuuden välillä.