El desplazamiento virtual es una forma ingeniosa de reducir la sobrecarga de renderizado, y es especialmente útil a medida que aumenta la complejidad de los sitios web. Aunque hay muchas bibliotecas plug-and-play que soportan el desplazamiento virtual en varios frameworks, crear el tuyo propio es sorprendentemente fácil. Además, esto permite optimizar al máximo cada viewport para su contenido, desbloqueando ahorros adicionales de rendimiento.
En esta charla, aprenderás cómo crear un viewport de desplazamiento virtual flexible desde cero, y hacerlo eficiente utilizando conceptos de programación funcional. Seguiremos una implementación de un viewport de desplazamiento virtual usando componentes web de principio a fin, incluyendo alturas de elementos variables, skeletons, renderizado asíncrono de componentes hijos. Luego lo optimizaremos usando memoization, envolviendo constructos imperativos más eficientes en una capa funcional, y usando reciclaje de elementos para reducir significativamente el churn de renderizado al usar componentes hijos sin estado.
Finalmente, tocaremos el estado del arte en el renderizado del DOM virtual, y cómo este enfoque se compara con el uso de la nueva propiedad CSS `content-visibility`.
This talk has been presented at JSNation US 2024, check out the latest edition of this JavaScript Conference.
Comments