Analiza el rendimiento del entorno de ejecución

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, se explica cómo 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 de 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 en un estado limpio. Por ejemplo, si tienes muchas extensiones instaladas, es posible que estas generen ruido en tus 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. Presiona 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 . Herramientas para desarrolladores revela la configuración relacionada con la forma en que captura las métricas de rendimiento.

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

   

   Figura 2. Limitación de la CPU, 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 las descripciones que ves en este instructivo, sin importar tu configuración en particular.

1. Sigue haciendo clic en Agregar 10 hasta que los cuadrados azules se muevan mucho más lento que antes. En una máquina de alta gama, se pueden necesitar alrededor de 20 clics.

2. Haz clic en Optimizar. Los cuadrados azules deben moverse más rápido y con mayor fluidez.

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

Registra 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. ¿Por qué pasa eso? Se supone que ambas versiones mueven cada cuadrado la misma cantidad de espacio en el mismo tiempo. Realiza una grabación en el panel 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 . Herramientas para desarrolladores captura las métricas de rendimiento a medida que 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 la grabación, procesa los datos y, luego, muestra los resultados en el panel Rendimiento.

   

   Figura 4: Resultados del perfil

La cantidad de datos es abrumadora. No te preocupes, todo tendrá más sentido en breve.

Analizar los resultados

Una vez que tengas una grabación del rendimiento de la página, puedes 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 se alegran 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 disminuyó 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, verás 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 Rendimiento. El hecho de que el gráfico CPU esté lleno de color significa que se agotó el máximo de CPU durante el registro. Siempre que veas que la CPU se agotó durante períodos prolongados, 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 arrastre y es útil para analizar manualmente la progresión 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. Las Herramientas para desarrolladores te muestran los FPSs para ese fotograma en particular. Es probable que cada fotograma esté muy por debajo del objetivo de 60 FPS.

   

   Figura 8: Cómo colocar el cursor sobre un marco

Con esta demostración, es bastante 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 resulta útil contar con todas estas herramientas para realizar mediciones.

Contenido adicional: Abre el medidor de FPS

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

1. Presiona Comando+Mayús+P (Mac) o Control+Mayús+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 Medidor de FPS. Aparecerá una superposición nueva en la esquina superior derecha del 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 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 eventos seleccionados, 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 la cantidad de tiempo dedicado a realizar el 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 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 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 esquina superior derecha del evento Animation Frame Fired. Cada vez que 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. Ahora, la pestaña Resumen te muestra información sobre ese evento. Observa el vínculo revelar. Cuando haces clic, Herramientas para desarrolladores destacan el evento que inició el evento Animation Frame Fired. Además, ten en cuenta el vínculo app.js:94. Cuando haces clic, se te dirige a la línea relevante del código fuente.

   

   Figura 13: Más información sobre el evento Se activó el marco de animación

6. Debajo del evento app.update, hay un conjunto de eventos morados. Si fueran más anchas, parece como si cada una tuviera un triángulo rojo. Ahora, haz clic en uno de los eventos de diseño 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 reprocesamientos forzados (otra palabra para 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 provocó el diseño forzado

¡Vaya! Eso fue mucho por incorporar, 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.

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 otra grabación de rendimiento y, luego, analizar los resultados. Desde la velocidad de fotogramas mejorada hasta la reducción de eventos en el gráfico de llamas de la sección Main, puedes ver que la versión optimizada de la app realiza mucho menos trabajo, lo que da como resultado 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 familiarizarte 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 punto de partida es la Descripción general del rendimiento de la renderización. The Anatomy Of A Frame 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 tantos que puedes encontrar. En el resto de la serie sobre el rendimiento de la renderización, se incluyen muchas sugerencias útiles para mejorar varios aspectos del rendimiento del tiempo de ejecución, como los siguientes:

• Cómo optimizar la ejecución de JS
• Reduce el alcance y la complejidad de los cálculos de estilo
• Cómo evitar 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