Publicado: 8 de octubre de 2025
Los DOM de gran tamaño pueden aumentar la duración de los cálculos de diseño y de estilo, lo que afecta la capacidad de respuesta de la página. Un DOM grande también aumenta el uso de memoria.
Un árbol del DOM profundo no es un problema de rendimiento en sí mismo, pero es un síntoma de patrones de diseño que usan anidación innecesaria de elementos.
Esta estadística considera todo el DOM, incluso dentro de las raíces de sombra. Ignora los nodos DOM que no son también elementos. También ignora el contenido de <iframe>.
Qué debes hacer:
- Total de elementos: Es la cantidad total de elementos en el DOM de tu página.
- Profundidad del DOM: Es la profundidad máxima del árbol del DOM.
- La mayoría de los hijos: Es el elemento con la mayor cantidad de elementos secundarios.
Cómo aprobar esta estadística
Esta estadística solo falla si hay un nuevo cálculo de diseño o de estilo grande que supera una duración de 40 ms.
- Una actualización de diseño grande implica más de 100 objetos de diseño (que son aproximadamente elementos).
- Un nuevo cálculo de estilo grande afecta a más de 300 elementos.
Si se produce un error, en el panel Rendimiento, esta estadística destaca estos eventos en el gráfico de llamas.
Para reducir el costo de estos eventos, haz lo siguiente:
- Obtén información para medir el costo de los selectores CSS y reducir la complejidad del diseño.
- Minimiza la profundidad del DOM reduciendo el anidamiento innecesario.
- Considera adoptar componentes web para usar el Shadow DOM. Si bien esto no reducirá el tamaño del DOM, sí reducirá el costo de los recálculos de estilo.
Orientación específica para la pila
Esta estadística también ofrece orientación específica para la pila de páginas que usan las siguientes tecnologías:
Angular
Si renderizas listas grandes, usa el desplazamiento virtual con el Component Dev Kit (CDK).
React
- Usa una biblioteca de "ventanas" como
react-windowpara minimizar la cantidad de nodos DOM que se crean si renderizas muchos elementos repetidos en la página. - Minimiza las renderizaciones repetidas innecesarias con
shouldComponentUpdate,PureComponentoReact.memo. - Omite efectos solo hasta que hayan cambiado ciertas dependencias si usas el enlace de
Effectpara mejorar el rendimiento del tiempo de ejecución.
Referencias adicionales:
- Código fuente de la estadística
- Cómo los tamaños grandes del DOM afectan la interactividad y qué puedes hacer al respecto
- Cómo minimizar el reprocesamiento del navegador
- Estadísticas de selectores en las Herramientas para desarrolladores de Chrome
- Invalidación de estilo en Blink
- Cómo medir el tiempo de nuevo cálculo del diseño en el campo