Usa la herramienta del generador de perfiles de asignación para encontrar objetos que la recolección de elementos no utilizados no procese correctamente, y que sigan reteniendo memoria.
Cómo funciona la herramienta
El generador de perfiles de asignación combina la información detallada de la instantánea del generador de perfiles del montón con la actualización y el seguimiento incrementales del panel de cronograma. De manera similar a estas herramientas, el seguimiento de la asignación de montón de los objetos implica iniciar un registro, realizar una secuencia de acciones y, luego, detener el registro para su análisis.
La herramienta toma instantáneas de montón periódicamente durante la grabación (con una frecuencia hasta cada 50 ms) y una instantánea final al final de la grabación.
Cómo habilitar el generador de perfiles de asignación
Para comenzar a usar el generador de perfiles de asignación, sigue estos pasos:
- Asegúrate de tener la versión más reciente de Chrome Canary.
- Abre las Herramientas para desarrolladores y haz clic en el ícono de ajustes en la esquina inferior derecha.
- Ahora, abre el panel Profiler. Deberías ver un perfil llamado “Record Heap Allocations”.
Cómo leer un perfil de asignación de montón
El perfil de asignación de montón muestra dónde se crean los objetos e identifica la ruta de retención. En la siguiente instantánea, 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 aún están activos en la instantánea final del montón. Las barras azules indican los objetos que aún están activos al final del cronograma, mientras que las barras grises indican los objetos que se asignaron durante el cronograma, pero que desde entonces fueron recolectados como elementos no utilizados:
En la siguiente instantánea, se realizó una acción 10 veces. El programa de muestra almacena en caché cinco objetos, por lo que se esperan las últimas cinco barras azules. Pero la barra azul que se encuentra más a la izquierda indica un posible problema.
Luego, puedes usar los controles deslizantes del cronograma anterior para acercar esa instantánea en particular y ver los objetos que se asignaron recientemente en ese punto:
Si haces clic en un objeto específico del montón, se mostrará el árbol de retención en la parte inferior de la instantánea del montón. Si examinas la ruta de retención del objeto, deberías obtener suficiente información para comprender por qué no se recopiló el objeto. Además, podrás realizar los cambios necesarios en el código para quitar la referencia innecesaria.
Cómo ver la asignación de memoria por función
También puedes ver la asignación de memoria por función de JavaScript. Consulta Cómo investigar la asignación de memoria por función para obtener más información.