Resolución Práctica de Problemas de Rendimiento en Aplicaciones Web

Hola, soy Jonathan, y soy un arquitecto de software en Vonage. También soy corredor. Esta soy yo ganando un medio maratón, y esto es relevante porque hoy hablaremos sobre el rendimiento en tiempo de ejecución. Así que aquí está la prueba de que puedes confiar en mí.

¿Qué es el rendimiento en tiempo de ejecución? Veamos un ejemplo, la recolección de basura. La recolección de basura es el proceso en JavaScript en el que JavaScript toma los objetos que ya no son necesarios y los elimina de la memoria. Eso es en una sola oración. ¿Cuál puede ser el problema con eso? Veámoslo.

Aquí tenemos dos arreglos, dos funciones. Uno es build Array, que crea un arreglo e itera n veces y agrega elementos a un arreglo. Este es build Array2. Preasigna el arreglo y luego itera n veces y coloca los mismos elementos en los mismos índices. Dos funciones que hacen cosas similares, pero veamos si difieren en algo. Aquí podemos ver el perfilado de estas dos funciones. build Array tardó más en ejecutarse que build Array2, y realmente podemos usar este perfil para ver por qué. Si profundizamos, podemos ver que en build Array, tuvimos alrededor de 1,250 recurrencias de recolección de basura menor. Si miramos build Array2, vemos que son alrededor de 200. Esta es una gran diferencia, y esto es en esencia el rendimiento en tiempo de ejecución, el perfilado y la optimización de funciones para que se ejecuten en menos tiempo. ¿Por qué es importante? Echemos un vistazo rápido al bucle de eventos.

El Event Loop es lo que ejecuta nuestro hilo principal. Aquí es donde se ejecuta el código de nuestra aplicación. Si está bloqueado, entonces nuestro código no se está ejecutando, los otros códigos que necesitan ejecutarse, por ejemplo, en el lado del servidor en la respuesta de la API, o en el navegador, un usuario no puede hacer clic en nada, o las animations se quedarán atascadas.

Entonces esto es en el navegador, y esto es en Node.js. Y, nuevamente, lo importante que debemos entender aquí es que queremos que las tareas estén optimizadas lo máximo posible, y veamos cómo podemos ver las tareas y cómo podemos optimizarlas.

Esta es una función, algo bastante notable, debería resultarte familiar, en lugar de N tenemos un millón, crea un arreglo de un millón de elementos. Pero tenemos el set interval. Set interval es un temporizador, y un temporizador es una de las cosas que agrega tareas al Event Loop. Por lo tanto, podemos ver que cada segundo, algo bastante notable se agregará al Event Loop y se ejecutará como una tarea. Veámoslo en una demostración. Esta es nuestra función aquí. Se está ejecutando en el navegador, vamos a la pestaña de performance, y hacemos clic en grabar. Podemos grabar durante unos cinco segundos, por lo que deberíamos tener alrededor de cinco repeticiones de esta función. Y podemos ver estas elevaciones aquí. ¿De acuerdo? Podemos ver estas elevaciones aquí, y si nos fijamos un poco... Podemos verlo en el gráfico de llamas. Estas elevaciones ocurren cada segundo. Este es nuestro set interval. Y podemos ver que agrega una tarea cada vez, y la tarea es algo bastante notable. Por lo tanto, podemos ver todo lo que sucede durante el runtime y analizarlo para optimización. Tenemos una pestaña de resumen que nos muestra, por ejemplo, si observamos todo el runtime, muestra cuánto tiempo estuvo ocupada nuestra aplicación ejecutando scripts en comparación con el tiempo inactivo. O podemos ver el árbol de llamadas, por ejemplo. Veamos una tarea y veamos qué sucedió durante esta tarea, o podemos ver toda la grabación y buscar a lo largo de todas las llamadas algo bastante notable también, y aquí podemos ver algunas recolecciones de basura menores. Esto es lo esencial del perfilado de aplicaciones en el navegador. Veamos cómo puedes hacer esto en Node.js. En Node.js tienes la página de inspección de Chrome, y debes iniciar tu aplicación con la bandera --inspect. La aplicación se está ejecutando, y abres las DevTools dedicadas para Node, vas a la pestaña de perfilado, comienzas a perfilar, perfilar durante unos cinco segundos nuevamente, detienes el perfilado, y vemos nuestras elevaciones aquí nuevamente. Nuevamente, es lo mismo que en el navegador. Si sabes cómo optimizar en el navegador, puedes hacerlo en Node.js y viceversa. ¿Cómo puede ayudarte esto en la vida real? Veamos un ejemplo de la vida real. En una aplicación que construimos, usamos Seasium, que es un visualizador en 3D del globo, y tuvimos que colocar muchas entidades en este mapa, y esto hacía que la interfaz de usuario se bloqueara, por lo que hicimos un perfilado y descubrimos que dos funciones tardaban mucho tiempo en ejecutarse en cada fotograma. Estas son las actualizaciones de la etiqueta y el cartel, e investigamos estas funciones y descubrimos que si agregamos una bandera de actualización una vez sucia a las entidades, solo cuando las actualizamos, podemos optimizarlo para que las entidades que no se actualizaron no sean procesadas por estas funciones. Y los resultados son que del 50 por ciento del tiempo de ejecución de scripts, pasamos al dos por ciento del tiempo de ejecución de scripts y la aplicación se salvó y las personas pudieron interactuar con ella, por lo que el hilo principal no se bloqueó. En resumen, vimos el Event Loop y cómo administra nuestro hilo principal, por lo que no queremos bloquearlo. No puedo enfatizar lo suficiente la importancia del perfilado al optimizar el rendimiento en tiempo de ejecución, y realmente me gustaría que lo intentes, lo aprendas y lo disfrutes. Hay mucho para leer al respecto. Puedes leerlo en mi blog, puedes leerlo en el blog de Google Web Dev, y muchas cosas al respecto en Internet. Espero que lo hayas disfrutado, y gracias.