Analiza las pérdidas de memoria con agentes de IA

Matthias Rohmer
José Luis Zapata

Las Herramientas para desarrolladores de Chrome para agentes permiten que tu agente de programación analice y corrija las pérdidas de memoria del cliente (incluidos JavaScript y WebAssembly) en tu aplicación. Al automatizar la recopilación y el análisis de instantáneas del montón, tu agente puede identificar los objetos que no se recopilan correctamente como basura y sugerir refactorizaciones de código específicas.

En un flujo de trabajo basado en agentes, tu agente de programación toma varias instantáneas en diferentes estados de la aplicación y usa herramientas de análisis especializadas.

Patrones comunes de fugas de memoria

El análisis de memoria se enfoca en encontrar patrones de fugas comunes, incluidos los siguientes:

  • Objetos de escucha de eventos no borrados: Son objetos de escucha de eventos adjuntos a objetos globales (como window o document) que impiden la recolección de elementos no utilizados.
  • Nodos DOM desconectados: Nodos quitados del árbol del documento, pero a los que aún se hace referencia con una variable de JavaScript.
  • Variables globales no intencionales: Son variables declaradas sin el alcance adecuado que permanecen en la memoria para siempre.
  • Cierres: Cierres que, sin intención, mantienen referencias a objetos grandes en su propio alcance.
  • Estructuras de datos sin límites: Son estructuras de datos que se usan para el almacenamiento en caché y que crecen sin límites.

Consideraciones para el análisis de memoria

Cuando uses el análisis de memoria, ten en cuenta lo siguiente:

  • No leas instantáneas sin procesar directamente: No permitas que tu agente lea archivos .heapsnapshot sin procesar directamente. Son demasiado grandes y superan los límites de contexto. La habilidad de depuración de fugas de memoria indica explícitamente a los agentes que eviten leer estos archivos.

  • Metodología de tres instantáneas: Para encontrar fugas de forma confiable, tu agente generalmente necesita capturar tres instantáneas: una de referencia antes de la acción, una de destino después de la acción y una final después de revertir la acción. Ten en cuenta que algunas acciones, como las que se activan con temporizadores (setTimeout) o animaciones (requestAnimationFrame), se producen sin interacción del usuario y es posible que no requieran un paso de reversión.

    Ten en cuenta que algunas acciones, como las que se activan con temporizadores (setTimeout) o animaciones (requestAnimationFrame), se producen sin interacción del usuario y podrían aumentar el uso de memoria.

  • Verifica antes de corregir: Siempre revisa los hallazgos del agente para asegurarte de que las acciones propuestas sean aplicables y correctas para la lógica de tu aplicación. Por ejemplo, confirma si un nodo separado forma parte de una caché intencional antes de indicarle al agente que anule las referencias.

Casos de uso del análisis de fugas de memoria

Indica a tu agente que genere perfiles de memoria durante las acciones repetitivas, incluidos los temporizadores y las interacciones del usuario, en lugar de tomar instantáneas y compararlas manualmente. Integra el análisis de memoria en tu proceso de depuración con estos flujos de trabajo.

Nota: Los pasos de ejecución del agente son ejemplos de comportamiento potencial. Tu agente puede actuar de manera diferente.

Detecta objetos de escucha de eventos no borrados durante la navegación

Las aplicaciones de una sola página (SPA) suelen tener pérdidas de memoria cuando los desarrolladores olvidan quitar los objetos de escucha de eventos globales después de que se desmonta un componente. Puedes pedirle a tu agente que verifique que la memoria se libere correctamente cuando se navega entre vistas.

Ejemplo de instrucción:

Navigate from the home page to the dashboard and back to the home page. Use the take_heapsnapshot tool to check if we have any uncleared event listeners causing memory leaks.

Ejemplo de ejecución del agente: Tu agente toma una instantánea de montón de referencia en la página principal, navega al panel y vuelve a la página principal para tomar una instantánea final. Luego, usa herramientas de análisis internas para evaluar las instantáneas, detectar que nunca se borró un objeto de escucha scroll adjunto al objeto window y proporcionar el código específico para llamar a removeEventListener en la función de limpieza de tu componente.

Identifica nodos DOM separados en componentes de la IU

Los modales, los menús desplegables y los componentes de IU complejos suelen dejar nodos DOM separados si se conservan referencias a ellos en variables de JavaScript después de que se quitan del DOM.

Ejemplo de instrucción:

Open the user settings modal and close it 5 times. Analyze the heap snapshots and tell me if there are any detached DOM nodes left behind. If there are, ask me if they are intentional before writing a fix.

Ejemplo de ejecución del agente: Tu agente interactúa con la ventana modal de configuración mientras recopila las instantáneas requeridas de referencia, objetivo y final. El análisis revela varios objetos en crecimiento etiquetados como Detached HTMLDivElement. El agente te informa sobre el hallazgo y te pide que confirmes antes de cambiar el código para establecer las variables que contienen las referencias del DOM en null.

Cómo encontrar cachés sin límites en interacciones continuas

Las funciones como el desplazamiento infinito o la recuperación continua de datos pueden provocar pérdidas de memoria si los arrays o mapas subyacentes crecen de forma indefinida sin un límite.

Ejemplo de instrucción:

Scroll down the infinite feed list to load more items three times. Check if our LRU cache is unbounded and leaking memory, and suggest a fix.

Ejemplo de ejecución del agente: Tu agente analiza el estado de la memoria antes y después del desplazamiento. Identifica un cierre que captura de forma no intencional un array grande que crece sin límites. El agente sugiere implementar límites de almacenamiento en caché o usar un WeakMap para los datos asociados con los ciclos de vida de los objetos para permitir una recolección de elementos no utilizados adecuada.

Depura las fugas de memoria en los procesos en segundo plano

Los temporizadores de animación y de segundo plano pueden filtrar memoria sin interacción explícita del usuario. Puedes indicarle a tu agente que supervise el crecimiento de la memoria con el tiempo para encontrar fugas de memoria en estos procesos.

Ejemplo de instrucción:

Explore this canvas application and monitor memory usage. Help me determine areas of improvement around reusing objects and textures.

Ejemplo de ejecución del agente: Tu agente explora la aplicación de lienzo y toma automáticamente instantáneas periódicas para supervisar el uso de memoria a lo largo del tiempo. Analiza el montón e identifica que el bucle de renderización envía nuevas mallas de WebGL a un array en cada fotograma sin recopilar los elementos anteriores, lo que sugiere optimizaciones para la reutilización de objetos.