Large Data Sets
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
- Java
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.