usar tools theme para herramientas google developers desarrolladores desarrollador dark como codigo chrome performance google-chrome

performance - tools - herramientas de desarrollador google



¿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? (2)

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, noto que la línea Conteo del Nodo del DOM sube, baja y luego sigue subiendo.

Entendí que esto significa que el elemento DOM cuenta en mi página estaban aumentando pero después de hacer

document.getElementsByTagName("*").length

en la consola noté 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?


El gráfico de recuento 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 de 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.


Los nodos DOM que aún se mantienen en la memoria se denominan nodos separados. 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 las herramientas de desarrollo de Google que explica qué son los nodos DOM separados con un código simple y cómo detectarlo con las DevTools de Chrome: https://developers.google.com/web/tools/chrome-devtools/memory-problems/