Suurten listojen renderöinnin ongelma

Oletetaan, että käytte läpi kymmenentuhannen kohteen taulukon ja renderöitte jokaiselle li-elementin. React luo tunnollisesti 10 000 DOM-solmua, vaikka näytölle mahtuu kerrallaan vain parikymmentä.

Suurin osa solmuista on näytön ulkopuolella ja näkymättömissä, mutta selaimen on silti luotava, aseteltava ja ylläpidettävä jokaista niistä.

Selain maksaa suurista DOM-puista todellisen hinnan. Asettelu, tyylien uudelleenlaskenta ja muisti kasvavat solmujen määrän mukana, joten valtava lista hidastaa ensimmäistä renderöintiä ja kasvattaa muistin käyttöä.

Jopa yksinkertaiset vuorovaikutukset voivat takerrella, kun selainmoottorin on seurattava ja aseteltava uudelleen kymmeniätuhansia solmuja.

Käyttäjät huomaavat ongelman selvimmin valtavaa listaa vierittäessään. Selain piirtää näkymää uudelleen ja saattaa laskea asettelun uudelleen sisällön liikkuessa, ja liian suuri solmumäärä laskee kuvataajuuden alle sulavan tason.

Tuloksena on nykivä ja viiveinen vieritys, joka saa käyttöliittymän tuntumaan reagoimattomalta, vaikka sovelluksen muu osa olisi kuinka nopea.

Voitte vahvistaa ongelman selaimen DevToolsin Memory-paneelissa, joka ilmoittaa sivun DOM-solmujen määrän. Tuhansia solmuja luova lista näkyy täällä selvästi.

Kun seuraatte määrän nopeaa kasvua renderöidessänne lisää kohteita, saatte konkreettisen todisteen siitä, että DOMin koko on pullonkaula.

Virtualisointi, josta käytetään joskus nimitystä ikkunointi, renderöi koko listan sijaan vain parhaillaan näkyvät kohteet ja pienen puskurin niiden ympärille. Vierityksen aikana näkymään tulevat kohteet liitetään DOMiin ja näkymästä poistuvat irrotetaan siitä.

Näin aktiivinen DOM pysyy pienenä riippumatta datan kohteiden määrästä, jolloin DOMin koko ei riipu datajoukon koosta.

Näkyvä ikkuna johdetaan vierityssijainnista, säilön korkeudesta ja kohteen korkeudesta. Näyttöalueen korkeuden jakaminen kohteen korkeudella kertoo likimäärin, kuinka monta riviä mahtuu näkyviin, ja vierityksen siirtymä kertoo, mitkä rivit ovat kyseessä.

Kirjasto käyttää näitä lukuja päättääkseen tarkasti, mikä kohteiden osa renderöidään kullakin hetkellä.

Useat kirjastot toteuttavat ikkunointia. react-virtualized sisältää paljon ominaisuuksia mutta on suurempi, react-window on saman tekijän pienempi ja keskittyneempi uudelleenkirjoitus, ja TanStack Virtual on moderni headless-vaihtoehto.

Useimmille listoille react-window tarjoaa erinomaisen tasapainon yksinkertaisuuden ja suorituskyvyn välillä, minkä vuoksi tämä kurssi keskittyy siihen.

Virtualisoinnista on hyötyä, kun listat ovat pitkiä, yleensä vähintään useita satoja rivejä, tai kun rivit sisältävät raskaita kuvia ja sisäkkäisiä komponentteja. Näissä tapauksissa DOMin koko todella heikentää suorituskykyä.

Rajattomat syötteet, suuret datataulukot ja keskusteluhistoriat ovat tyypillisiä tilanteita, joissa ikkunoinnista tulee välttämätöntä eikä vain valinnaista.

Muutaman kymmenen yksinkertaisen kohteen lyhyissä listoissa virtualisointi lisää monimutkaisuutta ilman merkittävää hyötyä. Absoluuttisen sijoittelun ja mittaamisen aiheuttama ylimääräinen työ voi jopa heikentää kokonaisuutta.

Varatkaa ikkunointi aidosti suurille datajoukoille; pienissä listoissa tavallinen map on yksinkertaisempi ja täysin riittävän nopea.

Ikkunointia käytettäessä sadantuhannen kohteen listalla DOMissa on vain näkyvissä oleva pieni joukko kohteita, joten ensimmäinen renderöinti on nopea, muistin käyttö pysyy pienenä ja vieritys on sulavaa.

Käyttöönotto monimutkaistuu hieman, mutta vastineeksi suorituskyky ei enää riipu datan määrästä. Tämä on virtualisoinnin keskeinen lupaus.

Tuhansien DOM-solmujen renderöinti kasvattaa asettelukustannuksia ja muistin käyttöä sekä tekee vierityksestä nykivää. Voitte vahvistaa tämän tarkistamalla solmujen määrän DevToolsissa. Virtualisointi renderöi vain näkyvän ikkunan ja puskurin, joten DOM pysyy pienenä.

react-window on react-virtualized- ja TanStack Virtual -kirjastojen joukossa keskittynyt ja kevyt vaihtoehto. Käyttäkää sitä suurille tai raskaille listoille ja jättäkää se pois lyhyistä ja yksinkertaisista listoista.