Analiza el rendimiento del entorno de ejecución

Kayce Basques

El rendimiento del tiempo de ejecución es el rendimiento de tu página cuando se ejecuta en lugar de cuando se carga. En este instructivo, aprenderás a usar el panel Performance de las Herramientas para desarrolladores de Chrome para analizar el rendimiento del tiempo de ejecución. En términos del modelo RAIL, las habilidades que aprenderás en este instructivo son útiles para analizar las fases de respuesta, animación e inactividad de tu página.

Comenzar

En este instructivo, abrirás Herramientas para desarrolladores en una página activa y usarás el panel Rendimiento para encontrar un cuello de botella de rendimiento en la página.

1. Abre Google Chrome en modo Incógnito. Este modo garantiza que Chrome se ejecute correctamente. Por ejemplo, si tienes muchas extensiones instaladas, estas podrían generar ruido en las mediciones de rendimiento.

2. Carga la siguiente página en tu ventana de incógnito. Esta es la demostración del perfil. La página muestra un montón de pequeños cuadrados azules que se mueven hacia arriba y hacia abajo.

   https://googlechrome.github.io/devtools-samples/jank/

3. Presione Comando + Opción + I (Mac) o Control + Mayúsculas + I (Windows y Linux) para abrir Herramientas para desarrolladores.

   

   Figura 1: La demostración a la izquierda y Herramientas para desarrolladores a la derecha

Simula una CPU móvil

Los dispositivos móviles tienen mucha menos potencia de CPU que las computadoras de escritorio y las laptops. Cuando generes el perfil de una página, usa la limitación de CPU para simular el rendimiento de la página en dispositivos móviles.

1. En Herramientas para desarrolladores, haz clic en la pestaña Rendimiento.
2. Asegúrate de que la casilla de verificación Capturas de pantalla esté habilitada.
3. Haz clic en Capture Settings . Las Herramientas para desarrolladores revelan la configuración relacionada con la forma en que capturan las métricas de rendimiento.

4. En CPU, selecciona 2 veces velocidad. Herramientas para desarrolladores limita tu CPU para que sea 2 veces más lenta de lo habitual.

   

   Figura 2. Limitación de la CPU, resaltada en azul

Configura la demostración

Es difícil crear una demostración de rendimiento del tiempo de ejecución que funcione de manera coherente para todos los lectores de este sitio web. En esta sección, puedes personalizar la demostración para asegurarte de que tu experiencia sea relativamente coherente con las capturas de pantalla y descripciones que ves en este instructivo, sin importar tu configuración particular.

1. Sigue haciendo clic en Agregar 10 hasta que los cuadrados azules se muevan considerablemente más lento que antes. En un equipo de alta gama, puede requerir alrededor de 20 clics.

2. Haz clic en Optimizar. Los cuadrados azules deberían moverse más rápido y con más fluidez.

3. Haz clic en Anular optimización. Los cuadrados azules se mueven más lento y con más bloqueos nuevamente.

Cómo registrar el rendimiento del entorno de ejecución

Cuando ejecutas la versión optimizada de la página, los cuadrados azules se mueven más rápido. ¿A qué se debe? Se supone que ambas versiones mueven cada cuadrado la misma cantidad de espacio en el mismo tiempo. Realiza una grabación en el Panel de rendimiento para aprender a detectar el cuello de botella de rendimiento en la versión no optimizada.

1. En las Herramientas para desarrolladores, haz clic en Record . Las Herramientas para desarrolladores capturan las métricas de rendimiento mientras se ejecuta la página.

   

   Figura 3: Creación de perfiles de la página

2. Espera unos segundos.

3. Haz clic en Detener. Herramientas para desarrolladores detiene el registro, procesa los datos y, luego, muestra los resultados en el panel Rendimiento.

   

   Figura 4: Resultados del perfil

¡Vaya! Es una cantidad abrumadora de datos. No te preocupes, todo tendrá más sentido en breve.

Analiza los resultados

Una vez que tengas una grabación del rendimiento de la página, podrás medir qué tan bajo es y encontrar las causas.

Cómo analizar fotogramas por segundo

La métrica principal para medir el rendimiento de cualquier animación son los fotogramas por segundo (FPS). Los usuarios están contentos cuando las animaciones se ejecutan a 60 FPS.

1. Observa el gráfico de FPS. Siempre que veas una barra roja sobre FPS, significa que la velocidad de fotogramas se redujo tanto que es probable que esté afectando la experiencia del usuario. En general, cuanto más alta sea la barra verde, mayor será el valor de FPS.

   

   Figura 5: Gráfico de FPS en azul

2. Debajo del gráfico de FPS, se ve el gráfico de CPU. Los colores del gráfico CPU corresponden a los colores de la pestaña Summary, en la parte inferior del panel Performance. El hecho de que el gráfico CPU esté lleno de color significa que se alcanzó el límite de CPU durante el registro. Siempre que veas que la CPU se agotó por largos períodos, es una señal para encontrar formas de hacer menos trabajo.

   

   Figura 6: El gráfico de CPU y la pestaña Resumen, en color azul

3. Coloca el cursor sobre los gráficos de FPS, CPU o NET. Herramientas para desarrolladores muestra una captura de pantalla de la página en ese momento. Mueve el mouse hacia la izquierda y hacia la derecha para volver a reproducir la grabación. Esto se denomina arrastrar y es útil para analizar manualmente el progreso de las animaciones.

   

   Figura 7: Vista de una captura de pantalla de la página alrededor de la marca de 2,000 ms de la grabación

4. En la sección Marcos, coloca el cursor sobre uno de los cuadrados verdes. Herramientas para desarrolladores te muestra el FPS de ese marco en particular. Es probable que cada fotograma esté muy por debajo del objetivo de 60 FPS.

   

   Figura 8: Coloca el cursor sobre un marco

Con esta demostración, es obvio que la página no tiene un buen rendimiento. Sin embargo, en situaciones reales, es posible que no sea tan claro, por lo que puede ser útil contar con todas estas herramientas para realizar mediciones.

Bonificación: Abre el medidor de FPS

Otra herramienta útil es el medidor de FPS, que proporciona estimaciones en tiempo real de FPS a medida que se ejecuta la página.

1. Presiona Comando + Mayúsculas + P (Mac) o Control + Mayúsculas + P (Windows y Linux) para abrir el Menú de comandos.
2. Comienza a escribir Rendering en el menú de comandos y selecciona Show Rendering.

3. En la pestaña Renderización, habilita el Medidor de FPS. Aparecerá una superposición nueva en la esquina superior derecha de tu viewport.

   

   Figura 9: El medidor de FPS

4. Inhabilita el Medidor de FPS y presiona Escape para cerrar la pestaña Renderización. No la usarás en este instructivo.

Encontrar el cuello de botella

Ahora que ya mediste y verificaste que la animación no tiene un buen rendimiento, la siguiente pregunta que debes responder es: ¿por qué?

1. Observa la pestaña de resumen. Cuando no hay ningún evento seleccionado, esta pestaña te muestra un desglose de la actividad. La página dedicó la mayor parte del tiempo a la renderización. Dado que el rendimiento es el arte de hacer menos trabajo, tu objetivo es reducir el tiempo dedicado al trabajo de renderización.

   

   Figura 10: La pestaña Summary, en color azul

2. Expande la sección Main (Principal). Herramientas para desarrolladores te muestra un gráfico tipo llama de actividad en el subproceso principal a lo largo del tiempo. El eje X representa el registro, a lo largo del tiempo. Cada barra representa un evento. Una barra más ancha significa que el evento tardó más tiempo. El eje Y representa la pila de llamadas. Cuando ves eventos apilados uno encima del otro, significa que los eventos superiores causaron los eventos inferiores.

   

   Figura 11: La sección principal, con contorno en azul

3. Hay muchos datos en la grabación. Para acercar un solo evento Animation Frame Fired, haz clic, mantén presionado y arrastra el mouse sobre la Descripción general, que es la sección que incluye los gráficos FPS, CPU y NET. En la sección Main y en la pestaña Summary, solo se muestra información de la parte seleccionada de la grabación.

   

   Figura 12: Acercamiento de un solo evento activado por un marco de animación

4. Observa el triángulo rojo en la parte superior derecha del evento Animation Frame Fired. Cuando veas un triángulo rojo, es una advertencia de que puede haber un problema relacionado con este evento.

5. Haz clic en el evento Animation Frame Fired. La pestaña Resumen ahora muestra información sobre ese evento. Observa el vínculo revelar. Si haces clic, las Herramientas para desarrolladores destacarán el evento que inició el evento Animation Frame Fired. Además, observa el vínculo app.js:94. Si haces clic, te llevará a la línea relevante del código fuente.

   

   Figura 13: Más información sobre el evento Animation Frame Fired

6. Dentro del evento app.update, hay un conjunto de eventos morados. Si fueran más anchas, parece que cada uno tendría un triángulo rojo. Haz clic en uno de los eventos de diseño de color púrpura. Las Herramientas para desarrolladores proporcionan más información sobre el evento en la pestaña Resumen. De hecho, hay una advertencia sobre los reprocesamientos forzados (otra palabra para el diseño).

7. En la pestaña Summary, haz clic en el vínculo app.js:70 en Layout Forced. Herramientas para desarrolladores te lleva a la línea de código que forzó el diseño.

   

   Figura 13: La línea de código que causó el diseño forzado

¡Vaya! Eso fue suficiente por ahora, pero ahora tienes una base sólida en el flujo de trabajo básico para analizar el rendimiento del entorno de ejecución. Buen trabajo.

Contenido adicional: Analiza la versión optimizada

Con los flujos de trabajo y las herramientas que acabas de aprender, haz clic en Optimizar en la demostración para habilitar el código optimizado, realizar otro registro de rendimiento y, luego, analizar los resultados. Desde la velocidad de fotogramas mejorada hasta la reducción de eventos en el gráfico tipo llama de la sección Main, puedes ver que la versión optimizada de la app realiza mucho menos trabajo, lo que brinda un mejor rendimiento.

Próximos pasos

La base para comprender el rendimiento es el modelo RAIL. Este modelo te enseña las métricas de rendimiento más importantes para los usuarios. Consulta Cómo medir el rendimiento con el modelo RAIL para obtener más información.

Para sentirte más cómodo con el panel Rendimiento, la práctica hace al maestro. Intenta crear perfiles de tus propias páginas y analizar los resultados. Si tienes alguna pregunta sobre los resultados, abre una pregunta de Stack Overflow etiquetada con google-chrome-devtools. Si es posible, incluye capturas de pantalla o vínculos a páginas que se puedan reproducir.

Para convertirte en un experto en rendimiento del tiempo de ejecución, debes aprender cómo el navegador traduce HTML, CSS y JS a píxeles en una pantalla. El mejor lugar para comenzar es la Descripción general del rendimiento de la renderización. La anatomía de un marco profundiza en aún más detalles.

Por último, existen muchas formas de mejorar el rendimiento del tiempo de ejecución. Este instructivo se centró en un cuello de botella de animación en particular para ofrecerte un recorrido enfocado por el panel de rendimiento, pero es solo uno de los muchos que puedes encontrar. El resto de la serie Rendimiento de la renderización tiene muchas sugerencias útiles para mejorar varios aspectos del rendimiento del tiempo de ejecución, como las siguientes:

• Cómo optimizar la ejecución de JS
• Reduce el alcance y la complejidad de los cálculos de estilo
• Evita los diseños grandes y complejos, y la paginación excesiva de diseños
• Simplifica la complejidad de la pintura y reduce las áreas de pintura
• Limítate solo a las propiedades del compositor y administra el recuento de capas
• Elimina los efectos de rebote en los controladores de entrada