VIRTUALIZACIÓN DE SCROLL EN LISTADOS DE GRAN VOLUMEN /

VIRTUALIZACIÓN DE SCROLL EN LISTADOS DE GRAN VOLUMEN

En el desarrollo de aplicaciones web modernas, uno de los factores más importantes que debemos tener en cuenta es el rendimiento. Un buen rendimiento no solo mejora la velocidad de carga, sino que también asegura una experiencia de usuario fluida y sin interrupciones. Cuando estamos manejando grandes volúmenes de datos, como tablas de datos extensas o listados de productos, podemos enfrentarnos a diversos problemas de ren-deri-zado, lo que puede hacer que nuestras páginas web se vuelvan lentas y poco responsivas, y esto puede generar demoras significativas.

En este contexto, es muy importante contar con herramientas y técnicas que optimicen el manejo de estos datos y mejoren la experiencia del usuario. 

Hoy se les presentara una herramienta que resulta ser clave para lograr un desempeño óptimo en cualquier sitio web que estemos desarrollando: Virtual Scroll.

¿Qué es?

Es una técnica de renderizado optimizado que se usa cuando se necesita mostrar una gran cantidad de elementos dentro de un contenedor con desplazamiento.

Únicamente muestra en el DOM los elementos del listado que se muestran al usuario, así como algunos anteriores y posteriores a estos.

Herramientas y librerías de Virtual Scroll

DOM

Es una estructura en árbol compuesta por nodos, que los navegadores crean (a partir del HTML) para interpretar y manipular dinámicamente una página web mediante JavaScript.

Reflow

El proceso en el que el motor de renderizado del navegador calcula las posiciones y tamaños de TODOS los elementos que se encuentren en el DOM.

Sucede cuando:

●      Se agrega, elimina o mueve un elemento en el DOM.

●      Se cambia el tamaño de la ventana (resize).

●      Se modifican propiedades como width, height, margin, padding, display, etc.

●      Se modifican fuentes.

●      Se cargan imágenes dinámicamente.

Sobrecarga del DOM

Cuando tenemos una página web con un número excesivo de nodos, podemos llegar a apreciar una baja en el performance cuando el navegador realice el proceso de reflow.

Para evitar ésto, NO debemos de:

●      Superar los 1500-2000 nodos en el DOM.

●      Superar profundidades de 10 nodos.

●      Anidar nodos innecesariamente.

Herramientas principales de listado para evitar la sobrecarga de DOM

¿Qué es un scroll virtual?

Es una técnica de renderizado optimizado que se usa cuando se necesita mostrar una gran cantidad de elementos dentro de un contenedor con desplazamiento.

Únicamente muestra en el DOM los elementos del listado que se muestran al usuario, así como algunos anteriores y posteriores a estos.

●    React: React Window / React Virtualized

●   Angular: Material CDK Scrolling

● Vanilla Javascript: 

●     Vue: Vue Virtual Scrolling