Saltar al contenido

Large Data Sets

Abrir en ChatGPT

Desplazamiento virtual

El componente Table está diseñado para manejar eficientemente grandes conjuntos de datos mediante el uso de desplazamiento virtual, que es una técnica utilizada en aplicaciones web para optimizar la representación y el rendimiento de listas o tablas grandes al renderizar solo los elementos visibles en la pantalla.

Renderizado inicial

El desplazamiento virtual es un patrón de diseño en el que, inicialmente, solo se renderiza un pequeño subconjunto de elementos que encajan dentro del área visible del contenedor desplazable. Esto minimiza la cantidad de elementos DOM creados y acelera el proceso de renderizado inicial.

Carga dinámica

A medida que el usuario se desplaza hacia abajo o hacia arriba, nuevos elementos se cargan dinámicamente en la vista. Estos elementos generalmente se obtienen del origen de datos en función de la posición de desplazamiento actual.

Reciclaje de elementos

En lugar de crear un nuevo elemento DOM para cada elemento, el desplazamiento virtual a menudo reutiliza los elementos DOM existentes. A medida que un elemento sale del área visible, su elemento DOM se recicla y se reutiliza para un nuevo elemento que entra en el área visible. Este proceso de reciclaje ayuda a reducir el uso de memoria y mejora el rendimiento.

Beneficios de rendimiento

La principal ventaja del desplazamiento virtual es el rendimiento mejorado, especialmente al tratar con un gran número de elementos. Reduce la cantidad de manipulación del DOM y mejora la capacidad de respuesta general de la interfaz de usuario.

La siguiente Table muestra todos los ganadores olímpicos: un gran conjunto de datos que se beneficia enormemente de la funcionalidad de desplazamiento virtual de la tabla:

Mostrar Código

Overscan

Configurar la propiedad Overscan de la tabla determina cuántas filas renderizar fuera del área visible. Esta configuración se puede ajustar con el método setOverscan(double value).

Un valor de overscan más alto puede reducir la frecuencia de renderizado al desplazarse, pero a costa de renderizar más filas de las que son visibles en un momento dado. Esto puede ser un compromiso entre el rendimiento de renderizado y la suavidad del desplazamiento.