Investigar problemas de memoria

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

• Usar el panel de memoria para hacer un seguimiento del uso de la memoria.
• Acceder al monitor de desempeño para supervisar el tamaño de la pila de JS y los agentes de escucha de eventos JS.

Bloquear el navegador

El siguiente ejemplo tiene el potencial de bloquear su navegador. Las pérdidas de memoria del navegador del cliente pueden ralentizar la experiencia del navegador al punto de bloquearlo.

Arreglar la inmovilización o el bloqueo del navegador de Chrome

Los ejemplos del componente web Lightning en este módulo pueden hacer que su navegador quede inmovilizado, pero hay una herramienta ingeniosa que se puede utilizar para cerrar una ficha que no responde.

1. En la sección de fichas del navegador de Chrome, haga clic con el botón derecho en el área vacía y, a continuación, seleccione Task Manager (Administrador de tareas).
   
2. Haga clic sobre un elemento en el Administrador de tareas. El botón End Process (Finalizar proceso) se activa.
   
3. Cierre el Administrador de tareas.
   
   

Ahora tenemos una forma de salir de un proceso estancado.

Veamos otro mal ejemplo y la forma de solucionar el problema.

Exceso de agentes de escucha de eventos

1. Con la aplicación Bad Network abierta, seleccione Example 2: Count Clicks (Ejemplo 2: Contar clics).
2. Haga clic en Click Me (Hacer clic aquí) de forma repetida hasta que la respuesta de conteo se ralentice. El conteo es errático y no coincide con la cantidad de clics. El color también cambia. Usemos el monitor de desempeño para investigar.
3. Actualice la página.
4. En DevTools, haga clic en el ícono Customize and control DevTools (Personalizar y controlar DevTools) () para expandir el menú y, luego, haga clic en More tools (Más herramientas) > Performance monitor (Monitor de desempeño).

   

   El monitor hace un seguimiento del desempeño en el tiempo. Podemos supervisar los cambios mientras interactuamos con la página.

5. Seleccione las opciones JS heap size (Tamaño la de pila de JS) y JS event listeners (Agentes de escucha de eventos de JS) para ver los resultados.
   

   Observe la cantidad de agentes de escucha de eventos de JS. Es posible que los gráficos demoren en mostrar los cambios en la página. Preste atención al uso de la CPU, el tamaño de la pila de JS, los nodos DOM y los agentes de escucha de eventos de JS mientras continuamos.

6. Haga clic en Click Me (Hacer clic aquí) varias veces y observe que el uso de la CPU se mantiene bajo. Los nodos DOM también se mantienen bajos. Sin embargo, el tamaño de la pila de JS y los agentes de escucha de eventos de JS crecen considerablemente.
   

Analicemos la información que brinda DevTools para colaborar con el seguimiento del tamaño de la pila de JS.

Usar el panel de memoria

1. Cierre el monitor de desempeño.
2. En el menú DevTools, seleccione la ficha Memory (Memoria).
   
3. Actualice la página para comenzar con un ejemplo nuevo.
   Esto le permite capturar la línea base de comparación en una instantánea.
4. En el panel Memory (Memoria), haga clic en Take snapshot (Tomar instantánea).
5. Espere que se cree la instantánea y que aparezca. (Esto puede tardar unos minutos, según la velocidad de su navegador).
   
6. Haga clic en Click Me (Hacer clic aquí) hasta que se ralentice, como hizo antes.
7. Seleccione el encabezado Profiles (Perfiles) y haga clic en Take snapshot (Tomar instantánea) para crear una instantánea nueva.
8. Espere que se cree la instantánea. Se mostrará debajo de la primera instantánea. El tamaño aumentó 20.5 MB de la Instantánea 1 (95.5 MB) a la Instantánea 2 (116 MB). Es posible que el tamaño de sus instantáneas sea distinto.
   

Comparación de las dos instantáneas

1. En el menú Memory (Memoria), en la lista de perspectivas (configurada en Summary [Resumen]), seleccione Comparison (Comparación).

   

   De forma predeterminada, Chrome compara la instantánea anterior, pero puede realizar la comparación con una instantánea diferente. Para ello, debe seleccionarla en el menú desplegable que se encuentra arriba de los datos. Cada fila muestra la diferencia por elemento entre las dos instantáneas.

   
   
2. Seleccione el encabezado de columna Size Delta (Tamaño delta) para ordenar por tamaño delta. Si hace clic en el encabezado se desplazará por las opciones de clasificación.
3. Ordene de mayor a menor.
   

   Desplácese hacia abajo en la columna Constructor (Constructor) y observe que la mayoría son elementos de sistema antes del constuctor SomeObj. En este caso, se crearon 6142 elementos SomeObjs. ¡Es un montón!

   

   Puede usar el filtro Class (Clase) para buscar SomeObj.

4. Expanda SomeObj para abrirlo y ver todas sus instancias.
   

   El constructor JavaScript de SomeObj en la memoria está enumerado para cada instancia de SomeObj. En este caso, es el archivo example2_CountClicks.js de la línea 63.

5. Seleccione un elemento SomeObj para ver sus detalles en el panel Object (Objeto). (Ese panel está debajo del panel Constructor [Constructor] y el panel Retainers [Retenedores]).
   

   En los detalles del panel Object (Objeto), en la segunda línea, el primer contexto muestra el archivo y la ubicación de la llamada para generar el objeto example2_CountClicks.js en la línea 81.

6. Haga clic en el vínculo example2_CountClicks.js para abrir el archivo en el panel Sources (Fuentes).
   

   La línea 81 se encuentra en el método listenForEvent, que crea una instancia nueva de SomeObj y luego la utiliza en addEventListener para un evento de clic. Por lo tanto, cada vez que el cuerpo recibe un clic, se agrega otro EventListener para el evento de clic en el cuerpo. El problema es que los agentes de escucha nunca se limpian y esto crea una pérdida de memoria.

   

   Otro problema aquí es que el código agrega el agente de escucha de eventos directamente a document.body. Esta no es una práctica recomendada.

   También puede ver los elementos EventListeners en la ficha Elements (Elementos).

7. Seleccione la ficha Elements (Elementos).
8. Seleccione la etiqueta body y, a continuación, seleccione Event Listeners (Agentes de escucha de eventos).
   
9. Expanda el evento click (clic).

   

   Estos son todos los agentes de escucha (en el cuerpo) que se agregaron mediante todos los clics. Esta es una pérdida de memoria clásica. Puede hacer que el navegador se ralentice y se bloquee.

Tenga cuidado cuando agregue agentes de escucha de eventos. Limpiar los agentes de escucha adecuadamente es parte de crear buenos componentes web Lightning. Consulte la sección Resources para obtener más información sobre los eventos y los agentes de escucha.

Ahora ya sabe cómo usar algunas de las herramientas de desarrollador que se encuentran disponibles en los navegadores web. Utilícelas para investigar los problemas de red y de memoria cuando solucione problemas de los componentes web Lightning.

Recursos

• Documentos web MDN: EventTarget.addEventListener()
• Guía para desarrolladores de componentes web Lightning: Ejecutar un código cuando un componente se representa
• Guía para desarrolladores de componentes web Lightning: Crear y despachar eventos
• Guía para desarrolladores de componentes web Lightning: Acceder a elementos del componente