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

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

Cómo funciona la instrumentación de asignación en la línea de tiempo

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

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

El número después @ del es un Id. de objeto que se conserva en las múltiples instantáneas tomadas durante la sesión de grabación. El id. 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 mostrar la dirección de un objeto no tiene sentido.

Habilitar instrumentación de asignación en la línea de tiempo

Para empezar a usar las asignaciones en la línea de tiempo:

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

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona 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 actividades, seleccione la herramienta Memoria (icono de ).

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

   

4. Selecciona el botón de opción Asignaciones en la línea de tiempo .

   Si no se muestra el botón de opción Asignaciones en la línea de tiempo , porque ya se muestra un perfil, en la esquina 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, después, en el botón Detener en la página web de demostración. En función de lo que intente analizar, puede actualizar la página, interactuar con ella o simplemente dejar que la página se ejecute.

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 las asignaciones en la línea de tiempo

En la herramienta Memoria , utilice el tipo de generación de perfiles Asignaciones en la línea de tiempo . Esta es una de las características de DevTools para rastrear 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. Abre una página web, como una página web de demostración.

2. Abra DevTools y seleccione la herramienta Memoria .

3. Haz clic en el botón de opción Asignaciones en la línea de tiempo y, a continuación, haz clic en el botón Inicio .

4. Lleve a cabo la acción que sospecha que está causando la pérdida de memoria.

5. Cuando hayas terminado, haz clic en el botón Detener grabación de perfil de montón .

6. Mientras graba, observe si aparecen barras azules en la instrumentación de asignación en la escala de tiempo:

   

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

7. Haga zoom en una barra para filtrar el panel Constructor de modo que solo se muestren 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 de montón muestra dónde se crean los objetos e identifica la ruta de retención. En la siguiente figura, las barras de la parte superior indican cuándo se encuentran nuevos objetos en el montón.

La altura de cada barra corresponde al tamaño de los objetos asignados recientemente y el color de las barras indica si esos objetos siguen activos en la instantánea del montón final. Las barras azules indican objetos que aún están activos al final de la escala de tiempo, las barras grises indican objetos que se asignaron durante la escala de tiempo, pero que desde entonces se han recolectado como basura.

Puede usar los controles deslizantes de la escala de tiempo anterior para acercar esa instantánea en particular 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 debería proporcionarle suficiente información para comprender por qué no se recopiló el objeto y debe realizar los cambios de código necesarios para quitar la referencia innecesaria.

Ver asignación de memoria por función

Puede ver la asignación de memoria mediante la función JavaScript. Consulte Acelerar el tiempo de ejecución de JavaScript ("Muestreo de asignación", tipo de generación de perfiles).

Nota:

Algunas partes de esta página son modificaciones que se basan en trabajo creado y compartido por Google y que se usan de acuerdo con los términos descritos en la Licencia internacional de Creative Commons Atribution 4.0. La página original se encuentra aquí y está escrita por Meggin Kearney.

Este trabajo está bajo una licencia Creative Commons Attribution 4.0 International.