javascript - traversing - Documento Dom tree vs Detached Dom tree?

js heap

Question

Estoy encontrando pérdidas de memoria usando Chrome (novato :))

¿Cómo identificar dónde se está filtrando la memoria?

¿Y qué es Document DOM tree y Detached Dom tree?

¿Puede alguien explicarme?

Answer 1

Pasos para identificar fugas de memoria.

1. Comience con el modo incombativo Chrome.
2. Abre tu aplicación Abrir
3. Abre la herramienta Dev de Chrome (me gusta abrirlo al máximo en su propia ventana)
4. Haga clic en Perfil
5. Utilice la opción Tomar instantánea de instantáneas y haga clic en Instantánea
6. Realice algunos pasos específicos con su aplicación
7. Tome otra instantánea haciendo clic en el círculo negro en la esquina superior izquierda.
8. Repita los pasos 5 a 7 por 2 veces más
9. Verifique el tamaño retenido, si sigue aumentando, tiene un problema de memoria
10. En la pestaña Línea de tiempo, haga clic en el botón Recolector de basura.
11. Tome otra instantánea y vea si la memoria se reduce a un nivel razonable.

Pasos para identificar árboles DOM independientes

12. Para detectar árboles DOM independientes, haga clic en la pestaña Perfil en una de las instantáneas
13. Verá muchos objetos: intente filtrarlos escribiendo DOM como se muestra
14. Si ve algún Arbol DOM aislado, entonces "puede" tener un problema. Es posible que lo que está haciendo requiera que mantenga un DOM a un lado para clonar, etc. Por lo tanto, esto debe descartarse. Si ve algún DOms más allá de esto, no debe preocuparse por ellos, especialmente si se trata de una aplicación de una sola página, ya que otras aplicaciones vuelven a cargar todo pronto y eso puede borrar la memoria.

15. Puede inspeccionar los árboles DOM separados como se muestra a continuación.

16. Para comprobar qué DOM es, puede colocar el cursor sobre los elementos HTML rojos como se muestra a continuación. Esto ayuda a depurar una vez que ubicas el DOM

¿Qué son los "árboles DOM de documentos"? Todo el documento es un gran árbol DOM dentro. El documento es XML y las etiquetas se anidan formando un árbol. (DOM - Modelo de objeto de documento)

Entonces, ¿qué son los "árboles DOM separados"?

Los elementos HTML son una instancia de objetos que consumen memoria. Cada elemento puede almacenar en ellos incluso los oyentes y los datos asociados a él. Ahora, los "árboles DOM independientes" no son más que DOM que están en la memoria del navegador pero NO están adjuntos al árbol DOM principal, también conocido como "árboles DOM de documentos".

Al examinar estos objetos colgantes, podemos detectar problemas y evitar pérdidas de memoria.

Resolver este problema es un tema extenso ya que puede ver algunas soluciones variadas por ahí. Siga las siguientes publicaciones sobre lo que algunas personas han hecho para eliminar el problema.

Parece que no puede limpiar elementos DOM separados

Fugas de memoria Javascript: Árbol DOM independiente