Depuración de pérdidas de memoria DOM mediante la herramienta Elementos desasociados

La herramienta Detached Elements es una manera de buscar y mostrar todos los elementos desasociados en una página web. Para obtener más formas de evaluar las pérdidas de memoria, consulte Herramientas para investigar elementos desasociados en Corrección de problemas de memoria.

Importante

La herramienta Detached Elements está en desuso. A partir de Microsoft Edge 130, la herramienta Elementos desasociados tiene un mensaje que indica que la herramienta está en desuso; En su lugar, en la herramienta Memoria , en la pantalla Seleccionar tipo de generación de perfiles inicial, seleccione el botón de opción Desasociar elementos . La función EdgeDOMMemory.getDetachedNodesIds DevTools Protocol (CDP) de Chrome solo para Edge sigue funcionando, pero en su lugar se usa DOM.getDetachedDomNodes .

En Microsoft Edge 133, se quitará la herramienta Elementos desasociados ; En su lugar, en la herramienta Memoria , en la pantalla Seleccionar tipo de generación de perfiles inicial, seleccione el botón de opción Desasociar elementos . Se quitará la función EdgeDOMMemory.getDetachedNodesIds CDP; use DOM.getDetachedDomNodes en su lugar.

Para aumentar el rendimiento de la página web, busque los elementos que están desasociados del árbol DOM y a los que no esperaba seguir haciendo referencia el código JavaScript. Busque los elementos desasociados que el explorador no puede recopilar porque el código todavía hace referencia a ellos y, a continuación, libere las referencias de código JavaScript a los elementos desasociados.

La herramienta Elementos desasociados , que muestra los retenes en la herramienta Memoria , con vínculos para abrir el código JavaScript en la herramienta Orígenes :

Vídeo: Depuración de pérdidas de memoria con la herramienta Elementos desasociados de Microsoft Edge

Estrategia para corregir pérdidas de memoria mediante la herramienta Elementos desasociados

1. Abra una página web para analizarla.
2. Abra la herramienta Elementos desasociados .
3. Ejecute la recolección de elementos no utilizados, quitando todos los nodos a los que ya no hace referencia un objeto JavaScript.
4. Obtenga todos los elementos desasociados, que no se pudieron recopilar como elementos no utilizados.
5. Analice un elemento desasociado determinado y su JavaScript para identificar el nodo culpable en un árbol desasociado que hace que se conserve todo el árbol.

Obtención de elementos desasociados y análisis de JavaScript de un elemento desasociado

Para analizar un elemento desasociado mediante la página web de demostración Detached Elements :

1. Abra la página web de demostración Detached Elements en una nueva ventana o pestaña.

   El botón Sala 1 está seleccionado inicialmente. En el código JavaScript de la página web de demostración, se usa una instancia de la Room clase para administrar los mensajes en la sala 1.

2. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS).

   Se abre DevTools.

3. En DevTools, en la barra de actividad, seleccione la pestaña Elementos desasociados (). Si esa pestaña no está visible, haga clic en el botón Más herramientas () o haga que DevTools sea más ancho. Se abre la herramienta Elementos desasociados :

   

   Genere mensajes, que almacenará la instancia de JavaScript de la clase Room:

4. En la página web de demostración, haga clic en el botón Tráfico rápido .

   La página web de demostración comienza a generar mensajes y mostrarlos en la página web:

   

5. Después de mostrar algunos mensajes, haga clic en el botón Detener de la página web de demostración.

   Cada mensaje es un <div class="message"> elemento al que hace referencia la instancia de Room 1 de la Room clase . No hay ningún elemento desasociado en el árbol DOM de la página web, porque todos los elementos del mensaje están adjuntos a la instancia actual de Room 1 de la clase Room .

   Cambie a una instancia diferente de la clase Room, de modo que los elementos se desasocián:

6. En la página web de demostración, haga clic en el botón Sala 2 , que corresponde a otra instancia de la Room clase .

   En la página web, los mensajes desaparecen:

   

   Los mensajes generados para la instancia de Room 1 de la clase Room (<div class="message"> elementos) ya no están conectados al DOM, pero la instancia de Room 1 de la clase Room sigue haciendo referencia a ellos. Son elementos desasociados, lo que puede provocar pérdidas de memoria, a menos que la página web los vuelva a usar.

   Obtenga la lista de elementos desasociados:

7. En DevTools, en la herramienta Elementos desasociados, haga clic en el icono Recopilar elementos no utilizados (

   El explorador ejecuta la recolección de elementos no utilizados, quitando los nodos a los que ya no hace referencia un objeto JavaScript.

8. En la herramienta Elementos desasociados , haga clic en el botón Obtener elementos desasociados ().

   Se muestran los elementos DOM desasociados que no se pueden recopilar como elementos no utilizados:

   

   Estos elementos desasociados son pérdidas de memoria, si la aplicación no va a reutilizarlos.

   Identifique el código JavaScript que hace referencia a un elemento desasociado determinado:

9. En la herramienta Elementos desasociados , haga clic en el botón Analizar ().

   Un mensaje se muestra brevemente en la parte inferior de la herramienta Elementos desasociados , Tomando una instantánea del montón de memoria... y, a continuación, el mensaje Todo listo. La herramienta Memoria se abre en el panel Vista rápida en la parte inferior de DevTools:

   

   Si los botones de la opción Tipo de generación de perfiles se muestran en la herramienta Memoria en lugar de en una interfaz de usuario De resumen y retenes , haga clic de nuevo en el botón Analizar ().

10. En la herramienta Elementos desasociados , en la columna Id , haga doble clic en un identificador, como @21299 o @21783.

    Este es el identificador único de uno de los <div class="message"> elementos de la instantánea del montón de memoria. La herramienta Memoria muestra los retenes en la pestaña Retenedores :

    

    La herramienta Memoria selecciona automáticamente el objeto del montón que hace referencia al elemento desasociado. Este tipo de objeto se denomina retenedor.

11. En la pestaña Retenedores , en una sub-entrada de retención sobre el unmounted miembro, como desmontada en Room @54011, haga clic en el vínculo room.js:13.

    La herramienta Orígenes se abre en la barra de actividad y muestra la línea 13 del archivo room.js (el Room constructor):

    

    unmounted es un miembro de matriz de la Room clase , definido en la línea 19 del constructor: this.unmounted = [];.

12. Desplácese hacia abajo hasta la línea 49, this.unmounted.push(el); dentro del hide método de la Room clase :

    

    El código agrega cada mensaje de la sala a la unmounted matriz. La unmounted matriz es el objeto que hace referencia al elemento desasociado.

En el código JavaScript, ahora ha identificado el objeto de retención (la unmounted matriz) que impide que el explorador recopile el elemento desasociado.

Ha encontrado elementos desasociados que el explorador no puede recopilar elementos no utilizados y ha localizado el objeto JavaScript que sigue haciendo referencia al elemento desasociado. A continuación, puede cambiar el código JavaScript para liberar el elemento, para reducir el número de elementos desasociados en la página web, lo que aumenta el rendimiento de la página web y la capacidad de respuesta.

Identificar el nodo DOM que hace que se conserven otros nodos DOM

Dado que dom es un grafo totalmente conectado, cuando JavaScript conserva un nodo DOM en memoria, puede hacer que otros nodos DOM se conserven con él.

Para identificar el nodo culpable en un árbol desasociado que hace que se conserve todo el árbol:

1. Haga clic en el icono Desasociar elementos () para destruir los vínculos primarios y secundarios dentro del árbol desasociado.

2. Haga clic en el icono Recopilar elementos no utilizados (

   Los vínculos primarios y secundarios se quitan dentro del árbol desasociado y el elemento restante es el nodo DOM que hizo que se conservaran otros nodos DOM:

   

Cambiar el destino seleccionado a otro origen

Para comprobar si hay elementos desasociados de diferentes orígenes o marcos mediante la lista desplegable Destino seleccionado :

1. Haga clic en la lista desplegable Destino seleccionado :

   

2. Seleccione un origen diferente.

El nuevo origen se muestra en la herramienta Elementos desasociados .

Acerca de los elementos desasociados y las pérdidas de memoria

Los elementos desasociados no siempre son una indicación de una pérdida de memoria y las pérdidas de memoria no siempre se deben a elementos desasociados. Las pérdidas de memoria dependen del contexto de la aplicación.

Se puede producir una pérdida de memoria en la aplicación cuando un elemento ya no está asociado al árbol del modelo de objetos de documento (DOM), pero sigue siendo referenciado por algunos JavaScript que se ejecutan en la página web. Estos elementos se denominan elementos desasociados. Para que el explorador recopile (GC) el elemento desasociado, no se debe hacer referencia al elemento desde el árbol DOM ni desde el código JavaScript.

Los problemas de memoria afectan al rendimiento de la página web, incluidas las pérdidas de memoria, la saturación de memoria y las recolecciones frecuentes de elementos no utilizados. Los síntomas para los usuarios incluyen:

• El rendimiento de una página web empeora progresivamente con el tiempo.
• El rendimiento de una página web es constantemente malo.
• El rendimiento de una página web se retrasa o parece pausarse con frecuencia.

Ejecute GC antes de obtener elementos desasociados para mostrar solo los elementos que no pueden ser GC'd

Para mostrar solo los elementos que se desasocian del árbol DOM y que no se pueden recopilar como elementos no utilizados, siempre haga clic en Recopilar elementos no utilizados primero y, a continuación, haga clic en Obtener elementos desasociados.

Aunque algunos elementos puedan aparecer como desasociados en un momento dado, no sabrá si en realidad siguen siendo referenciados por código JavaScript en la página web hasta que ejecute GC. Al cambiar entre salas de chat en la aplicación de demostración, la página web quita los elementos que se usan para mostrar mensajes del DOM. Pero cambiar a una instancia diferente de la Room clase no elimina por completo estos elementos y todavía existen referencias a estos elementos, por lo que estos elementos permanecen en memoria.

Volver a adjuntar elementos

Para la página web de demostración de Elementos desasociados, tiene sentido conservar la lista de mensajes de chat para que, si un usuario vuelve a la sala 1, se conserve el registro de mensajes. De forma similar, una fuente en las redes sociales podría desasociar elementos a medida que los usuarios se desplazan más allá de ellos y volver a adjuntarlos al DOM cuando los usuarios se desplazan hacia arriba.

Cuando la herramienta Detached elements notifica elementos desasociados, no es necesariamente una pérdida de memoria. Depende de ti decidir qué es una pérdida de memoria y qué no. Quizás la aplicación vuelva a adjuntar esos elementos más adelante (en lugar de tener que volver a crearlos, lo que podría ser más lento).

La desasociación de nodos DOM es un enfoque útil, siempre y cuando, finalmente, se reutilicen esos elementos separados (o se eliminen). El valor de la herramienta Detached elements (Elementos desasociados ) es que, si sospecha que hay una pérdida de memoria, puede comprobar si la herramienta notifica un número creciente de elementos DOM desasociados inesperados.

Aplicaciones de larga duración y componentes de desmontaje

Asegúrese de desmontar los componentes. En el caso de las aplicaciones de larga duración, las pequeñas pérdidas de memoria de solo unos kilobytes pueden degradar notablemente el rendimiento con el tiempo. En el caso de las páginas web que usan el marco de React, React mantiene una copia virtualizada del DOM. Si no se desmontan correctamente los componentes, es posible que una aplicación filtre grandes partes del DOM virtual.

Informar de problemas

Si encuentra problemas con el funcionamiento de la característica Elementos desasociados , póngase en contacto con el equipo de Microsoft Edge DevTools para enviar comentarios sobre la característica Elementos desasociados y la depuración de pérdida de memoria.

Vea también

• Herramientas para investigar elementos desasociados en Corregir problemas de memoria : comparación de herramientas para ver elementos desasociados.

Demo:

• Página web de demostración de Elementos desasociados
• Carpeta del repositorio MicrosoftEdge/Demos > detached-elements : código fuente.