Usar instrumentación de asignación en la escala de tiempo ("Asignaciones en la escala de tiempo" tipo de generación de perfiles)

En la herramienta Memoria , use el tipo de generación de perfiles Asignaciones en la escala de tiempo para buscar objetos que no se recopilan correctamente como elementos no utilizados y seguir conservando memoria.

Funcionamiento de la instrumentación de asignación en la escala de tiempo

El tipo de generación de perfiles Asignaciones de la herramienta Memoria en la escala de tiempo combina la información detallada de instantáneas del generador de perfiles del montón con la actualización incremental y el seguimiento de la herramienta Rendimiento. De forma similar, el seguimiento de la asignación de montón para objetos implica iniciar una grabación, realizar una secuencia de acciones y detener la grabación para su análisis.

Las asignaciones en la escala de tiempo toman instantáneas del montón periódicamente a lo largo de la grabación (con tanta frecuencia como cada 50 ms) y una instantánea final al final de la grabación.

El número después de @ es un identificador de objeto que persiste en las varias instantáneas tomadas durante la sesión de grabación. El identificador de objeto persistente permite una comparación precisa entre los estados del montón. Los objetos se mueven durante las recolecciones de elementos no utilizados, por lo que no tiene sentido mostrar la dirección de un objeto.

Habilitación de la instrumentación de asignación en la escala de tiempo

Para empezar a usar asignaciones en la escala de tiempo:

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

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 herramienta Memoria ().

   Si esa pestaña no está visible, haga clic en el botón Más herramientas () y, a continuación, seleccione Memoria. Se abre la herramienta Memoria :

   

4. Seleccione el botón de opción Asignaciones en la escala de tiempo .

   Si no se muestra el botón de opción Asignaciones en la escala de tiempo , ya que ya se muestra un perfil, en la parte superior izquierda, haga clic en Perfiles ().

5. En la parte inferior de la herramienta Memoria , haga clic en el botón Inicio .

6. Interactuar con la página web; por ejemplo, haga clic en el botón Tráfico rápido y, a continuación, en el botón Detener de la página web de demostración. En función de lo que intente analizar, puede actualizar la página, interactuar con la página o simplemente dejar que se ejecute la página.

7. En la parte superior izquierda de la herramienta Memoria, haga clic en el botón Detener grabación del perfil del montón (

   Se crea una nueva instantánea en la sección Escalas de tiempo de asignación de la lista Perfiles :

   

Registrar asignaciones en la escala de tiempo

En la herramienta Memoria , use el tipo de generación de perfiles Asignaciones en la escala de tiempo . Esta es una de las características de DevTools para realizar un seguimiento de las pérdidas de memoria en el montón de JS.

Dado el código siguiente:

var x = [];
function grow() {
    x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);

Cada vez que se hace clic en el botón al que se hace referencia en el código, se agrega una cadena de un millón de caracteres a la x matriz.

Para registrar las asignaciones en la escala de tiempo:

1. Abra una página web, como una página web de demostración.

2. Abra DevTools y seleccione la herramienta Memoria .

3. Haga clic en el botón de opción Asignaciones en la escala de tiempo y, a continuación, haga clic en el botón Inicio .

4. Realice la acción que sospeche que está causando la pérdida de memoria.

5. Cuando haya terminado, haga clic en el botón Detener grabación del perfil del montón .

6. Mientras graba, observe si aparece alguna barra azul en la instrumentación de asignación en la escala de tiempo:

   

   Esas barras azules representan nuevas asignaciones de memoria. Esas nuevas asignaciones de memoria son las candidatas para pérdidas de memoria.

7. Acercar una barra para filtrar el panel Constructor para mostrar solo los objetos asignados durante el período de tiempo especificado.

   

8. Expanda el objeto y seleccione el valor para ver más detalles en el panel Objeto .

   Por ejemplo, en los detalles del objeto recién asignado indica que se asignó a la x variable en el Window ámbito:

   

Leer una escala de tiempo de asignación de montón

La escala de tiempo de asignación del montón muestra dónde se crean los objetos e identifica la ruta de acceso de retención. En la ilustración siguiente, las barras de la parte superior indican cuándo se encuentran nuevos objetos en el montón.

El alto de cada barra corresponde al tamaño de los objetos asignados recientemente y el color de las barras indica si esos objetos siguen vivos o no en la instantánea final del montón. Las barras azules indican objetos que todavía están activos al final de la escala de tiempo, las barras grises indican los objetos que se asignaron durante la escala de tiempo, pero que desde entonces se han recopilado como elementos no utilizados.

Puede usar los controles deslizantes de la escala de tiempo anterior para acercar esa instantánea determinada y revisar los objetos que se asignaron recientemente en ese momento:

Al hacer clic en un objeto específico del montón se muestra el árbol de retención en la parte inferior de la instantánea del montón. El examen de la ruta de acceso de retención al objeto debe proporcionar información suficiente para comprender por qué no se recopiló el objeto y debe realizar los cambios de código necesarios para quitar la referencia innecesaria.

Visualización de la asignación de memoria por función

Puede ver la asignación de memoria por función de JavaScript. Consulte Aceleración del tiempo de ejecución de JavaScript ("Tipo de generación de perfiles de muestreo de asignación").

Nota:

Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y usadas según los términos descritos en la licencia internacional creative Commons Attribution 4.0. La página original se encuentra aquí y es creada por Meggin Kearney.

Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.