Evita un tamaño excesivo de DOM

Un árbol del DOM grande puede ralentizar el rendimiento de tu página de varias maneras:

  • Eficiencia de la red y rendimiento de carga

    A menudo, un árbol del DOM de gran tamaño incluye muchos nodos que no son visibles cuando el usuario carga la página por primera vez, lo que aumenta innecesariamente el costo de los datos para los usuarios y ralentiza el tiempo de carga.

  • Rendimiento del tiempo de ejecución

    A medida que los usuarios y las secuencias de comandos interactúan con tu página, el navegador debe recalcular la posición y el estilo de los nodos de forma constante. Si se combina un árbol del DOM de gran tamaño con reglas de estilo complicadas, la renderización se puede ralentizar considerablemente.

  • Rendimiento de la memoria

    Si tu JavaScript utiliza selectores de consultas generales, como document.querySelectorAll('li'), es posible que, sin saberlo, estés almacenando referencias a una gran cantidad de nodos, lo que puede sobrecargar las capacidades de memoria de los dispositivos de los usuarios.

Cómo falla la auditoría de tamaño del DOM de Lighthouse

Lighthouse informa el total de elementos DOM de una página, la profundidad máxima del DOM de la página y sus elementos secundarios máximos:

Una captura de pantalla de Lighthouse evita una auditoría excesiva de tamaño del DOM

Lighthouse marca páginas con árboles del DOM que:

  • Advierte cuando el elemento del cuerpo tiene más de 800 nodos aproximadamente.
  • Errores cuando el elemento del cuerpo tiene más de 1,400 nodos, aproximadamente.

Cómo optimizar el tamaño del DOM

En general, busca maneras de crear nodos del DOM solo cuando sea necesario y de destruirlos cuando ya no sean necesarios.

Si actualmente envías un árbol del DOM grande, carga tu página y toma nota de forma manual de los nodos que se muestran. Tal vez puedas quitar los nodos que no se muestran del documento cargado inicialmente y solo crearlos después de una interacción relevante del usuario, como un desplazamiento o un clic en un botón.

Si creas nodos del DOM en el tiempo de ejecución, Puntos de interrupción de cambio del DOM de modificación del subárbol puede ayudarte a identificar cuándo se crean los nodos.

Si no puedes evitar un árbol del DOM de gran tamaño, otro enfoque para mejorar el rendimiento de la renderización consiste en simplificar los selectores CSS. Consulta Reduce el alcance y la complejidad de los cálculos de diseño de Google para obtener más información.

Orientación específica para pilas

Angular

Si renderizas listas grandes, usa el desplazamiento virtual con el kit de desarrollo de componentes (CDK).

Reaccionar

  • Usa una biblioteca de "sistema de ventanas" como react-window para minimizar la cantidad de nodos del DOM que se crean si renderizas muchos elementos repetidos en la página.
  • Minimiza las repeticiones de renderizaciones innecesarias mediante shouldComponentUpdate, PureComponent o React.memo.
  • Omite los efectos solo hasta que hayan cambiado ciertas dependencias si usas el hook Effect para mejorar el rendimiento del entorno de ejecución.

Recursos