Siirry pääsisältöön

Large Data Sets

Avaa ChatGPT:ssä

Virtuaalinen vieritys​

Table-komponentti on rakennettu käsittelemään suuria tietoaineistoja tehokkaasti käyttämällä virtuaalista vieritystä, joka on tekniikka, jota käytetään verkkosovelluksissa suurten luetteloiden tai taulukoiden renderöinnin ja suorituskyvyn optimoimiseksi renderöimällä vain näkyvät kohteet näytöllä.

Alkuperäinen renderointi​

Virtuaalinen vieritys on suunnittelumalli, jossa aluksi renderöidään vain pieni osa kohteista, jotka mahtuvat vieritettävän säilön näkyvään alueeseen. Tämä minimoi luotujen DOM-elementtien määrän ja nopeuttaa alkuperäistä renderointiprosessia.

Dynaaminen lataus​

Kun käyttäjä vierittää alaspäin tai ylöspäin, uusia kohteita ladataan dynaamisesti näkymään. Nämä kohteet haetaan yleensä tietolähteestä nykyisen vieritysposition perusteella.

Kohteiden kierrätys​

Sen sijaan, että jokaiselle kohteelle luotaisiin uusi DOM-elementti, virtuaalinen vieritys usein hyödyntää olemassa olevia DOM-elementtejä. Kun kohde liikkuu näkyviltä alueilta, sen DOM-elementti kierrätetään ja käytetään uudelleen uudelle näkyvälle kohteelle. Tämä kierrätysprosessi auttaa vähentämään muistinkäyttöä ja parantaa suorituskykyä.

Suorituskykyedut:​

Virtuaalisen vierityksen pääetu on parantunut suorituskyky, erityisesti käsiteltäessä suurta määrää kohteita. Se vähentää DOM-manipulaation määrää ja parantaa käyttöliittymän yleistä reaktiivisuutta.

Alla oleva Table näyttää kaikki olympiavoittajat - suuren tietoaineiston, joka hyötyy suuresti taulukon virtuaalisen vieritysominaisuuden käytöstä:

Näytä koodi

Ylikatselu​

Taulukon Overscan-ominaisuuden asettaminen määrää, kuinka monta riviä renderöidään näkyvän alueen ulkopuolella. Tämän asetuksen voi määrittää setOverscan(double value)-menetelmällä.

Korkeampi ylikatseluarvo voi vähentää renderoinnin tiheyttä vieritettäessä, mutta se maksaa enemmän näkyvissä olevia rivejä renderöimällä kerralla. Tämä voi olla kauppatapa renderoinnin suorituskyvyn ja vierityksen sulavuuden välillä.