Utiliza la herramienta de generación de perfiles de asignación para buscar objetos que la recolección de elementos no utilizados no se recoja correctamente y seguir 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 Rutas. 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 detenerlo para su análisis.
La herramienta toma instantáneas de montón de manera periódica a lo largo de la grabación (¡cada 50 ms!) y una instantánea final al final de la grabación.
Habilita el generador de perfiles de asignación
Para comenzar a usar el generador de perfiles de asignación:
- 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 captura de pantalla, las barras de la parte superior indican el momento en que se encuentran objetos nuevos 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 se recolectaron 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 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á su árbol de retención en la parte inferior de la instantánea del montón. Si examinas la ruta de acceso de retención del objeto, deberías obtener suficiente información para comprender por qué no se recopiló el objeto y 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. Para obtener más información, consulta Cómo investigar la asignación de memoria por función.