¿Cuál es el recuento de nodos DOM en la vista de memoria de la línea de tiempo de las herramientas de desarrollador de google chrome?

Question

Me sale un "Aw, snap!" Chrome se bloquea cuando se carga una página web determinada. Hago mi mejor esfuerzo para descubrir qué es lo que lo está causando y lo estoy pasando muy mal.

En la herramienta del Desarrollador de Chrome hay una Pestaña de Memoria y cuando miro los gráficos del contador, veo que la línea Conteo del Nodo del DOM sube, baja y luego sigue subiendo.

Me entiende que esto significa que los recuentos de elementos DOM en mi página fueron aumentando, pero después de hacer

document.getElementsByTagName("*").length 

en la consola me di cuenta de que el valor no estaba cambiando.

Entonces, ¿qué es realmente el gráfico de recuento de nodos DOM? Si continúa aumentando así, ¿podría ser esa la causa del "Aw, snap"? ¿choque?

Answer 1

El gráfico de conteo de nodos DOM muestra la cantidad de nodos DOM creados que aún se conservan en la memoria, es decir, que aún no se han recogido basura. Esto no tiene que coincidir con los elementos que obtienes a través del getElementsByTagName. Este último también solo obtendrá los elementos realmente adjuntos al árbol de documentos. No obtendrá ningún elemento 'fuera de línea' al que todavía tenga referencias.

Una manera fácil de atascarse con este crecimiento de pirámide particular es el widget Me gusta de la API de Facebook, que contiene algún código en un temporizador de ejecución que crea cargas de nodos DOM adicionales.

Answer 2

Los nodos DOM que aún se conservan en la memoria se denominan nodos desconectados. Esto significa que no se muestran en el árbol DOM de su página, pero algunos códigos JavaScript aún los referencian en alguna parte. Lea esta publicación de herramientas de desarrollo de Google que explica qué son los nodos DOM separados con código simple y cómo detectarlo usando las DevTools de Chrome: https://developers.google.com/web/tools/chrome-devtools/memory-problems/