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

Use la herramienta Elementos desasociados para buscar elementos desasociados que el explorador no puede recopilar y busque el objeto JavaScript que sigue haciendo referencia al elemento desasociado. Al cambiar javaScript para liberar el elemento, se reduce el número de elementos desasociados en la página.

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 algunos JavaScript que se ejecutan en la página siguen haciendo referencia a ella. 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.

Para obtener más información sobre las instantáneas de montón y los elementos desasociados, consulte Detección de pérdidas de memoria de árbol DOM desasociadas con instantáneas de montón.

Como se explica en Corrección de problemas de memoria, los problemas de memoria afectan al rendimiento de la página, 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 empeora progresivamente con el tiempo.
• El rendimiento de una página es constantemente malo.
• El rendimiento de una página se retrasa o parece pausarse con frecuencia.

Abrir la herramienta Elementos desasociados

Para abrir la herramienta Elementos desasociados y cargar la página de demostración:

1. Abra la aplicación de demostración Detached Elements en una nueva ventana o pestaña.

2. Para abrir DevTools, 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 ():

   

Obtener elementos desasociados

El botón Obtener elementos desasociados () de la herramienta Elementos desasociados busca y muestra todos los elementos desasociados en una página web.

Para buscar elementos desasociados:

1. En la aplicación de demostración, asegúrese de que el botón Sala 1 está seleccionado.

2. En la aplicación de demostración, haga clic en el botón Tráfico rápido .

3. Después de generar y mostrar algunos mensajes en la aplicación de demostración, haga clic en el botón Detener de la demostración:

   

4. Haga clic en el botón Sala 2 :

5. En la herramienta Elementos desasociados , haga clic en el icono Obtener elementos desasociados ().

   La herramienta Elementos desasociados muestra todos los elementos desasociados de la página. Al cambiar a la sala 2 de la aplicación de demostración, los mensajes generados en la sala 1 ya no están conectados al DOM, pero JavaScript sigue haciendo referencia a ellos:

   

Desencadenamiento de la recolección de elementos no utilizados

A continuación, desencadene la recolección de elementos no utilizados (GC) en el explorador:

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

2. Haga clic en el icono Obtener elementos desasociados ().

Al seleccionar Recopilar elementos no utilizados, el explorador ejecuta la recolección de elementos no utilizados. Al seleccionar Obtener elementos desasociados, la herramienta Elementos desasociados muestra todos los elementos desasociados que no se pueden recopilar como elementos no utilizados. Estos elementos desasociados pueden ser pérdidas de memoria si la aplicación no va a reutilizarlos.

Identificación del código JavaScript que conserva elementos desasociados

Una vez que haya encontrado un elemento desasociado que no se puede recopilar como elemento no utilizado, puede usar el botón Analizar () de la herramienta Elementos desasociados para identificar el código JavaScript que se ejecuta en la página que sigue haciendo referencia al elemento desasociado. El botón Analizar toma una instantánea del montón y rellena el identificador del elemento desasociado con su ubicación en el montón.

Para obtener más información sobre las instantáneas de montón, lea Registro de instantáneas de montón mediante la herramienta Memoria.

Para identificar el código JavaScript que hace referencia a un elemento desasociado:

1. En la herramienta Elementos desasociados , haga clic en el icono Analizar ().

   La herramienta Memoria se abre en la barra de herramientas Vista rápida , en la parte inferior de DevTools:

   

2. En la herramienta Elementos desasociados , seleccione el campo Id de un elemento desasociado.

   La herramienta Memoria selecciona automáticamente el objeto del montón que hace referencia al elemento desasociado. Llamamos a estos objetos Retainers:

   

3. En la herramienta Memoria , seleccione 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.

4. En la hide() función de room.js, el código JavaScript de la aplicación de demostración agrega cada mensaje de la sala a una unmounted matriz. La unmounted matriz es el objeto que hace referencia al elemento desasociado:

   

Ahora ha identificado el retenedor que impide que el explorador recopile el elemento desasociado.

Identificación del nodo DOM que hace que se conserven otros usuarios

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:

   

Cambiar el destino seleccionado a otro origen

Puede 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 .

Consideraciones adicionales

Al buscar pérdidas de memoria, recuerde que las pérdidas pueden depender del contexto de la aplicación. Para la aplicación de demostración, ha encontrado elementos desasociados que no se pueden recopilar por el explorador y ha identificado el Código JavaScript que conserva los elementos desasociados. Sin embargo, en el contexto de la aplicación de demostración, tiene sentido conservar la lista de mensajes de chat, de modo que, si un usuario vuelve a sala 1, se conserve el registro de mensajes.

En la imagen siguiente se muestran elementos desasociados en forma de mensajes que se vuelven a adjuntar cuando un usuario navega de la sala 2 de vuelta a la sala 1:

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. 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.

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. Los desarrolladores web que usan el marco React saben que 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.

Esta aplicación de demostración y sus fugas son artificiales. Pruebe la herramienta Detached Elements en el sitio web o la aplicación de producción. Si encuentra posibles problemas con la herramienta Elementos desasociados, póngase en contacto con el equipo de Microsoft Edge DevTools para enviar comentarios sobre la herramienta Elementos desasociados y la depuración de pérdida de memoria.