Analiza el rendimiento del entorno de ejecución

Kayce Basques

Nota: Consulta Optimiza la velocidad del sitio web para obtener información sobre cómo hacer que tus páginas se carguen más rápido.

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 de rendimiento 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.

Precaución: Este instructivo se basa en Chrome 129. Si usas otra versión de Chrome, la IU y las funciones de DevTools pueden ser diferentes. Consulta chrome://help para ver qué versión de Chrome ejecutas.

Comenzar

En este instructivo, usaremos el panel Performance para encontrar un cuello de botella de rendimiento en una página publicada. Para comenzar, sigue estos pasos:

1. Abre Google Chrome en el Modo Incógnito. El modo Incógnito garantiza que Chrome se ejecute en buen estado. Por ejemplo, si tienes muchas extensiones instaladas, estas podrían crear ruido en tus mediciones de rendimiento.

2. Carga la siguiente página en tu ventana de incógnito. Esta es la demostración de la que harás un perfil. La página muestra muchos cuadrados azules pequeños 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 DevTools.

   

   Nota: En el resto de las capturas de pantalla, Herramientas para desarrolladores está desacoplado en otra ventana para que puedas ver mejor su contenido.

Cómo simular una CPU para dispositivos móviles

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

1. En DevTools, haz clic en la pestaña Rendimiento.
2. Asegúrate de que la casilla de verificación check_box Capturas de pantalla esté habilitada.
3. Haz clic en Configuración de captura settings. Herramientas para desarrolladores revela la configuración relacionada con la forma en la que captura las métricas de rendimiento.

4. En CPU, selecciona 4x legacydown. DevTools limita tu CPU para que sea 4 veces más lenta que lo habitual.

   

   Nota: Cuando pruebes otras páginas, si quieres asegurarte de que funcionen bien en dispositivos móviles de gama baja, configura el control de la CPU en 20 veces la ralentización. Esta demostración no funciona bien con una demora de 20 veces, por lo que solo usa una demora 4 veces mayor con fines educativos.

Configura la demostración

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

1. Sigue haciendo clic en Agregar 10 hasta que los cuadrados azules se muevan de forma más lenta que antes. En una máquina de alta gama, puede tardar unos 20 clics.

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

   Nota: Si no ves una diferencia notable entre las versiones optimizadas y no optimizadas, haz clic en Subtract 10 varias veces y vuelve a intentarlo. Si agregas demasiados cuadrados azules, solo maximizarás la CPU y no verás una gran diferencia en los resultados de las dos versiones.

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

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

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

1. En las Herramientas para desarrolladores, haz clic en Grabar radio_button_checked. DevTools captura las métricas de rendimiento a medida que se ejecuta la página.

   

2. Espera unos segundos.

3. Haz clic en Detener. DevTools detiene la grabación, procesa los datos y, luego, muestra los resultados en el panel Rendimiento.

   

¡Eso es una cantidad abrumadora de datos! No te preocupes, pronto tendrá más sentido.

Analiza los resultados

Una vez que tengas una grabación de rendimiento, podrás analizar qué tan bajo es el rendimiento de la página 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. Cada vez que veas una barra roja sobre FPS, significa que la velocidad de fotogramas disminuyó tanto que probablemente esté perjudicando la experiencia del usuario.

   

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 Performance. El hecho de que el gráfico de CPU esté lleno de color significa que se alcanzó el límite de la CPU durante el registro. Cada vez que veas que la CPU está al máximo durante períodos prolongados, es una señal para encontrar formas de hacer menos trabajo.

   

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

   

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

   

Por supuesto, 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 tener todas estas herramientas para realizar mediciones resulta útil.

Bonificación: 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ú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 el panel Rendering, habilita Show Rendering stats. Aparecerá una superposición nueva en la parte superior derecha de tu viewport.

   

4. Inhabilita el medidor de FPS y presiona Escape para cerrar el panel de Renderización. No lo usarás en este instructivo.

Cómo encontrar el cuello de botella

Ahora que midiste 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 Resumen. Cuando no se selecciona ningún evento, esta pestaña te muestra un desglose de la actividad. La página pasó la mayor parte del tiempo renderizándose. Como el rendimiento es el arte de hacer menos trabajo, tu objetivo es reducir la cantidad de tiempo empleado en el trabajo de renderización.

   

2. Expande la sección Principal. DevTools te muestra un gráfico de llama de la actividad en el subproceso principal con el paso del tiempo. El eje X representa la grabación 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 sobre otro, significa que los eventos superiores causaron los eventos inferiores.

   

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 Overview, que es la sección que incluye los gráficos FPS, CPU y NET. La sección Principal y la pestaña Resumen solo muestran información de la parte seleccionada de la grabación.

   

   Nota: También puedes usar WASD para navegar por la grabación. Enfoca la sección Principal. Para ello, haz clic en el fondo o selecciona un evento; luego, presiona W para acercar la imagen, S para alejarla, A para desplazarte hacia la izquierda o D para desplazarte hacia la derecha.

4. Observa el triángulo rojo en la parte superior derecha de los eventos de Task y de diseño. Cada vez que veas un triángulo rojo, significa que es posible que haya un problema relacionado con este evento. Un triángulo rojo en una tarea significa que fue una tarea larga.

5. Haz clic en el evento Animation Frame Fired. En la pestaña Resumen, ahora se muestra información sobre ese evento. Si haces clic en el vínculo junto a Iniciado por, DevTools destacará el evento que inició el evento Animation Frame Fired. También ten en cuenta el vínculo app.update @. Si haces clic en él, se te dirigirá a la línea relevante del código fuente.

   

   Nota: Después de seleccionar un evento, usa las teclas de flecha para seleccionar los eventos junto a él.

6. En el evento app.update, hay muchos eventos de color púrpura. Si fueran más anchos, parecería que cada uno tiene un triángulo rojo. Haz clic en uno de los eventos Diseño púrpura ahora. Las Herramientas para desarrolladores proporcionan más información sobre el evento en la pestaña Resumen. De hecho, hay una advertencia sobre los reflujos forzados (otra palabra para diseño).

7. En la pestaña Resumen, haz clic en el vínculo junto a app.update @ en Primera invalidación del diseño. DevTools te dirige a la línea de código que forzó el diseño.

   

   Nota: El problema con este código es que, en cada fotograma de la animación, cambia el estilo de cada cuadrado y, luego, consulta la posición de cada cuadrado en la página. Debido a que cambiaron los estilos, el navegador no sabe si cambió la posición de cada cuadrado, por lo que debe volver a diseñarlo para calcular su posición. Consulta Evita el diseño síncrono forzado para obtener más información.

¡Vaya! Fue mucho para asimilar, pero ahora tienes una base sólida en el flujo de trabajo básico para analítico el rendimiento del entorno de ejecución. Buen trabajo.

Extra: Analiza la versión optimizada

Con los flujos de trabajo y las herramientas que acabas de aprender, haz clic en Optimize 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 tipo llama de la sección Principal, puedes ver que la versión optimizada de la app realiza mucho menos trabajo, lo que genera un mejor rendimiento.

Nota: Incluso esta versión optimizada no es tan buena, ya que aún manipula la propiedad top de cada cuadrado. Un mejor enfoque es ceñirse a las propiedades que solo afectan la composición. Consulta Usa los cambios de transform y opacity para las animaciones para obtener más información.

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 tus 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 generar 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. Incluye capturas de pantalla o vínculos a páginas reproducibles, si es posible.

Para convertirte en un experto en el rendimiento del entorno de ejecución, debes aprender cómo el navegador traduce HTML, CSS y JS en píxeles en una pantalla. El mejor lugar para comenzar es la Descripción general del rendimiento de la renderización. En The Anatomy Of A Frame, se profundiza aún más en el tema.

Por último, existen muchas formas de mejorar el rendimiento del tiempo de ejecución. En este instructivo, nos enfocamos en un cuello de botella de animación en particular para brindarte una visita enfocada por el panel Rendimiento, pero es solo uno de los muchos cuellos de botella que puedes encontrar. El resto de la serie Rendimiento de renderización tiene muchas sugerencias útiles para mejorar varios aspectos del rendimiento del entorno de ejecución, como los siguientes:

• Optimización de 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