Overslaan naar hoofdinhoud

Large Data Sets

Openen in ChatGPT

Virtueel scrollen

De Table component is gebouwd om efficiënt om te gaan met grote datasets door gebruik te maken van virtueel scrollen, een techniek die wordt gebruikt in webapplicaties om de weergave en prestaties van grote lijsten of tabellen te optimaliseren door alleen de zichtbare items op het scherm weer te geven.

Initiële weergave

Virtueel scrollen is een ontwerppatroon waarbij aanvankelijk alleen een klein subset van items die passen binnen het zichtbare gebied van de scrollbare container wordt weergegeven. Dit minimaliseert het aantal DOM-elementen dat wordt aangemaakt en versnelt het initiële renderproces.

Dynamisch laden

Naarmate de gebruiker naar beneden of omhoog scrollt, worden nieuwe items dynamisch in de weergave geladen. Deze items worden meestal opgehaald uit de gegevensbron op basis van de huidige scrollpositie.

Item recycling

In plaats van voor elk item een nieuw DOM-element te creëren, hergebruikt virtueel scrollen vaak bestaande DOM-elementen. Wanneer een item uit het zichtbare gebied beweegt, wordt het DOM-element gerecycled en opnieuw gebruikt voor een nieuw item dat het zichtbare gebied binnenkomt. Dit recyclingproces helpt om het geheugenverbruik te verminderen en de prestaties te verbeteren.

Prestatievoordelen:

Het belangrijkste voordeel van virtueel scrollen is de verbeterde prestaties, vooral bij het omgaan met een groot aantal items. Het vermindert de hoeveelheid DOM-manipulatie en verbetert de algehele responsiviteit van de gebruikersinterface.

De onderstaande Table toont alle Olympische winnaars - een grote dataset die sterk profiteert van de virtuele scrollfunctionaliteit van de tabel:

Toon Code

Overscan

Het instellen van de Overscan eigenschap van de tabel bepaalt hoeveel rijen buiten het zichtbare gebied moeten worden weergegeven. Deze instelling kan worden geconfigureerd met de setOverscan(double value) methode.

Een hogere overscanwaarde kan de frequentie van weergave tijdens het scrollen verminderen, maar ten koste van het weergeven van meer rijen dan op elk moment zichtbaar zijn. Dit kan een afweging zijn tussen renderprestaties en scroll soepelheid.