Investigar problemas en la memoria

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

• Usar el panel Memory (Memoria) para controlar el uso de la memoria.
• Acceder al monitor de rendimiento para supervisar el tamaño de la pila de JS y la escucha de eventos de JS.

Bloqueo del navegador

El siguiente ejemplo tiene todo el potencial para bloquear el navegador. Las fugas de memoria en el navegador cliente puede ralentizar la experiencia de navegación hasta el punto de bloquearla.

Solucionar problemas de bloqueo en Chrome

Los ejemplos con componentes web Lightning de este módulo pueden provocar que el navegador se bloquee, pero hay una herramienta muy útil para cerrar las pestañas que no responden.

1. En la sección de pestañas de Chrome, haga clic con el botón derecho en la zona vacía y seleccione Administrador de tareas.
   
2. Haga clic en un elemento del Administrador de tareas. Se activa el botón Finalizar proceso.
   
3. Cierre el Administrador de tareas.
   
   

Ahora conocemos una manera de salir de un proceso atascado.

Veamos otro mal ejemplo y cómo solucionarlo.

Escuchas de eventos excesivas

1. Con la aplicación Bad Network abierta, seleccione Example 2: Count Clicks (Ejemplo 2: Recuento de clics).
2. Haga clic en Click Me (Haga clic aquí) varias veces hasta que la respuesta del recuento se ralentice. El recuento es errático y no se corresponde con el número de clics. El color también cambia. Vamos a usar el monitor de rendimiento para investigar el problema.
3. Actualice la página.
4. En DevTools, haga clic en el icono para personalizar y controlar DevTools () y expanda el menú. Luego, haga clic en More tools (Más herramientas) > Performance monitor (Monitor de rendimiento).

   

   El monitor de rendimiento supervisa el rendimiento con el tiempo. Podemos supervisar los cambios a medida que interactuamos con la página.

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

   Observe el número de escuchas de eventos de JS. Es posible que los cambios tarden un poco en aparecer en los gráficos de la página. Vigile el uso de la CPU, el tamaño de la pila de JS, los nodos DOM y las escuchas de eventos de JS a medida que continuamos.

6. Haga clic en Click Me (Haga clic aquí) varias veces y observe que el uso de la CPU no cambia. Los nodos DOM también se mantienen igual. Sin embargo, el tamaño de pila de JS y las escuchas de eventos de JS crecen bastante.
   

Vamos a explorar la información que ofrece DevTools para poder realizar un seguimiento del tamaño de pila de JS.

Usar el panel Memory (Memoria)

1. Cierre el monitor de rendimiento (Performance).
2. En el menú de DevTools, seleccione la pestaña Memory (Memoria).
   
3. Actualice la página para empezar con un ejemplo de cero.
   De esta forma, podrá capturar los datos de referencia de la comparación en una instantánea.
4. En el panel Memory (Memoria), haga clic en Take snapshot (Hacer instantánea).
5. Espere a que se cree la instantánea y aparezca (esto puede tardar unos minutos en función de la velocidad del navegador).
   
6. Haga clic en Click Me (Haga clic aquí) hasta que se ralentice como antes.
7. Seleccione el encabezado Profiles (Perfiles) y haga clic en Take snapshot (Hacer instantánea) para crear una instantánea.
8. Espere a que se cree la instantánea. Aparecerá debajo de la primera instantánea. El tamaño ha aumentado en 20,5 MB de la instantánea 1 (95,5 MB) hasta la instantánea 2. Los tamaños de instantánea pueden ser distintos a los que se muestran aquí.
   

Vamos a comparar las dos instantáneas

1. En el menú Memory (Memoria), en la lista Perspective (Perspectiva), que ahora está establecida en Summary (Resumen), seleccione Comparison (Comparación).

   

   De forma predeterminada, Chrome compara los datos con la instantánea anterior, pero puede seleccionar otra para comparar en el menú desplegable que está arriba de los datos. Cada fila muestra la diferencia por elemento entre las dos instantáneas.

   
   
2. Seleccione el encabezado de columna Size Delta (Delta de tamaño) para ordenar por delta de tamaño. Al hacer clic en el encabezado, se cambia de una opción de ordenación a la otra.
3. Ordene del tamaño más grande al más pequeño.
   

   Desplácese hacia abajo por la columna Constructor (Constructor) y observe que sobre todo hay elementos del sistema antes del constructor SomeObj. En este caso, se han creado 6142 SomeObjs. Eso es mucho.

   

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

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

   Aparece el constructor de JavaScript del SomeObj en la memoria de cada instancia del SomeObj. En este caso, es el archivo example2_CountClicks.js de la línea 63.

5. Seleccione un SomeObj para ver sus detalles en el panel Object (Objeto). (El panel Object (Objeto) se encuentra 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 (Orígenes).
   

   La línea 81 está en el método listenForEvent, que crea una nueva instancia de SomeObj y la usa en addEventListener para un evento de clic. Es decir, cada vez que se hace clic en el cuerpo, se añade otro EventListener para el evento de clic al cuerpo. El problema es que las escuchas nunca se limpian, por lo que se genera una fuga de memoria.

   

   Otro problema es que el código añade directamente la escucha del evento a document.body. Y esto no es una práctica recomendada.

   También puede ver las escuchas de eventos (EventListeners) en la ficha Elements (Elementos).

7. Seleccione la pestaña Elements (Elementos).
8. Seleccione la etiqueta body (cuerpo) y luego seleccione Event Listeners (Escuchas de eventos).
   
9. Expanda el evento de hacer clic.

   

   Estas son todas las escuchas (del cuerpo) que se han añadido con todos los clics. Esto representa una fuga de memoria típica. Puede provocar que el navegador se ralentice e incluso se bloquee.

Tenga cuidado al añadir escuchas de eventos. Limpiar las escuchas correctamente forma parte de la creación de buenos componentes web Lightning. Consulte la sección Recursos para obtener más información sobre los eventos y las escuchas.

Ahora ya sabe cómo usar algunas de las herramientas de desarrollo disponibles en los navegadores web. Úselas para investigar los problemas con la red y la memoria cuando solucione problemas en con componentes web Lightning.

Recursos

• MDN Web Docs: EventTarget.addEventListener()
• Guía del desarrollador de componentes web Lightning: Run Code When a Component Renders (Ejecutar código cuando se renderiza un componente)
• Guía del desarrollador de componentes web Lightning: Create and Dispatch Events (Crear y enviar eventos)
• Guía del desarrollador de componentes web Lightning: Access Elements the Component Owns (Acceder a elementos propiedad del componente)