Introducción al análisis del rendimiento en tiempo de ejecución

Nota

Para obtener información sobre cómo hacer que las páginas se carguen más rápido, vaya a Optimizar la velocidad del sitio web.

El rendimiento en tiempo de ejecución es el rendimiento de la página cuando se ejecuta, en lugar de cargarse. El siguiente artículo tutorial le enseña a usar el panel Rendimiento de Microsoft Edge DevTools para analizar el rendimiento en tiempo de ejecución. En cuanto al modelo RAIL, las habilidades que aprendas en este tutorial son útiles para analizar las fases respuesta, animación e inactividad de la página.

Introducción

En el siguiente tutorial, abra DevTools en una página en directo y use el panel Rendimiento para encontrar un cuello de botella de rendimiento en la página.

  1. Abra Microsoft Edge en modo InPrivate. El modo InPrivate garantiza que Microsoft Edge se ejecute en un estado limpio. Por ejemplo, si tiene muchas extensiones instaladas, las extensiones pueden crear ruido en las medidas de rendimiento.

  2. Cargue la página siguiente en la ventana InPrivate. La página es la demostración a la que se va a crear el perfil. La página muestra un montón de pequeños iconos que se mueven hacia arriba y hacia abajo.

    https://microsoft-edge-chromium-devtools.glitch.me/sluggish/
    
  3. Seleccione Control + Shift + I (Windows, Linux) o Command + Option + I (macOS) para abrir DevTools.

    La demostración a la izquierda y DevTools a la derecha

    Nota

    Para el resto de las figuras, DevTools se desacopla a una ventana independiente para centrarse mejor en el contenido.

Simular una CPU móvil

Los dispositivos móviles tienen mucha menos potencia de CPU que los equipos de escritorio y portátiles. Siempre que perfiles una página, usa la limitación de CPU para simular el rendimiento de la página en dispositivos móviles.

  1. En DevTools, elija la herramienta Rendimiento.

  2. Asegúrese de que la casilla Capturas de pantalla está habilitada.

  3. Elija Configuración de captura (![ Configuración de captura][ImageCaptureSettingsIcon]). DevTools muestra la configuración relacionada con la forma en que captura las métricas de rendimiento.

  4. Para CPU, elija 4x slowdown. DevTools limita la CPU para que sea 4 veces más lenta de lo habitual.

    Limitación de CPU

    Nota

    Al probar otras páginas; si desea asegurarse de que cada página funciona bien en dispositivos móviles de gama baja, establezca la limitación de CPU en 6x de ralentización. La demostración no funciona bien con una ralentización de 6x, por lo que solo usa 4x de ralentización para fines informativos.

Configurar la demostración

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

  1. Elija el botón Agregar 10 hasta que los iconos azules se muevan de forma notablemente más lenta que antes. En una máquina de gama alta, puede elegirla unas 20 veces.

  2. Elija Optimizar. Los iconos azules deben moverse más rápido y sin problemas.

    Nota

    Para mostrar mejor una diferencia entre las versiones optimizadas y las no optimizadas, elija el botón Restar 10 unas cuantas veces e inténtelo de nuevo.
    Si agrega demasiados iconos azules, puede que la CPU sea máxima y, a continuación, puede que no observe una diferencia importante en los resultados de las dos versiones.

  3. Elija Un-Optimize. Los iconos azules se mueven más lentos y con más lentitud de nuevo.

Rendimiento del tiempo de ejecución de registro

Cuando se ejecutó la versión optimizada de la página, los iconos azules se mueven más rápido. ¿Por qué? Se supone que ambas versiones mueven los iconos la misma cantidad de espacio en la misma cantidad de tiempo. Haga una grabación en el panel Rendimiento para obtener información sobre cómo detectar el cuello de botella de rendimiento en la versión no optimizada.

  1. En DevTools, elija Record (![ Record][ImageRecordIcon]). DevTools captura métricas de rendimiento a medida que se ejecuta la página.

    Perfil de la página

  2. Espere unos segundos.

  3. Elija Detener. DevTools deja de grabar, procesa los datos y, a continuación, muestra los resultados en el panel Rendimiento.

    Los resultados del perfil

Wow, es una cantidad abrumadora de datos. no se preocupe, pronto el proceso tiene más sentido.

Analizar los resultados

Después de registrar el rendimiento de la página, mida la calidad del rendimiento de la página y busque las causas.

Analizar fotogramas por segundo

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

  1. Revise el gráfico FPS. Cada vez que se muestra una barra roja encima de FPS, significa que la velocidad de fotogramas se ha reducido tan bajo que probablemente está dañando la experiencia del usuario. En general, cuanto mayor sea la barra verde, mayor será el FPS.

    Gráfico de FPS

  2. Debajo del gráfico FPS, se muestra el gráfico de CPU. Los colores del gráfico de CPU corresponden a los colores del panel Resumen, en la parte inferior del panel Rendimiento. El hecho de que el gráfico de CPU esté lleno de color significa que la CPU se ha maximizado durante la grabación. Cada vez que la CPU se ha maximizado durante períodos largos, es un indicador de que debe encontrar formas de hacer menos trabajo.

    Gráfico de CPU y panel Resumen

  3. Mantenga el mouse en los gráficos FPS, CPUo NET. DevTools muestra una captura de pantalla de la página en ese momento. Mueva el mouse a la izquierda y a la derecha para reproducir la grabación. La acción se hace referencia como depuración y resulta útil para analizar manualmente la progresión de las animaciones.

    Ver una captura de pantalla de la página alrededor de la marca de 2500 ms de la grabación

  4. En la sección Marcos, mantenga el mouse en uno de los cuadrados verdes. DevTools muestra los FPS de ese fotograma en particular. Cada fotograma probablemente esté muy por debajo del objetivo de 60 FPS.

    Mantener el mouse en un marco

Por supuesto, la pantalla indica que la página web no está funcionando bien. Pero en escenarios reales, puede que no sea tan claro, por lo que tener todas las herramientas para realizar mediciones resulta útil.

Bonificación: abrir el contador de FPS

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

  1. Seleccione Control + Shift + P (Windows, Linux) o Command + Shift + P (macOS) para abrir el menú de comandos.

  2. Empiece a Rendering escribir en el menú comando y elija Mostrar representación.

  3. En la herramienta De representación, habilite Fps Meter. Aparece una nueva superposición en la parte superior derecha de la ventanilla.

    El medidor fps

  4. Desactiva el fps meter y selecciona para cerrar la herramienta Escape de representación. No estás usando fps meter en este tutorial.

Buscar el cuello de botella

Después de medir y comprobar que la animación no funciona bien, el siguiente paso es responder a la pregunta "¿por qué?".

  1. Cuando no se elige ningún evento, el panel Resumen muestra un desglose de la actividad. La página pasó la mayor parte del tiempo en representarse. Dado que el rendimiento es el arte de hacer menos trabajo, el objetivo es reducir la cantidad de tiempo dedicado a realizar el trabajo de representación.

    El panel Resumen

  2. Expanda la sección Principal. DevTools muestra un gráfico de actividad de llama en el subproceso principal, con el tiempo. El eje X representa la grabación, con el 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 los eventos se apilan entre sí, significa que los eventos superiores provocaron los eventos inferiores.

    Sección Principal

  3. Hay una gran cantidad de datos en la grabación. Para acercar un solo evento; elija, mantenga y arrastre el cursor sobre overview , que es la sección que incluye los gráficos FPS, CPUy NET. La sección Principal y el panel Resumen solo muestran información para la parte elegida de la grabación.

    Acercar un evento

    Nota

    Otra forma de acercar, centrar la sección Principal, elegir el fondo o un evento y seleccionar W , , o A S D .

    1. Céntrate en el triángulo rojo de la parte superior derecha del evento Fotograma de animación desencadenado. Cada vez que se muestra un triángulo rojo, es una advertencia de que puede haber un problema relacionado con el evento.

    Nota

    El evento Animation Frame Fired se produce siempre que se ejecuta una requestAnimationFrame() devolución de llamada.

  4. Elija el evento Fotograma de animación desencadenado. El panel Resumen ahora muestra información sobre ese evento. Tenga en cuenta el vínculo Revelar. Después de elegirla, DevTools resaltará el evento que inició el evento Animation Frame Fired. Además, céntrate en el vínculoapp.js:95. Después de elegirla, se muestra la línea relevante en el código fuente.

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

    Nota

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

  5. En el evento app.update, hay un montón de eventos púrpura. Si cada evento púrpura era más ancho, parece que cada uno puede tener un triángulo rojo.

  6. Elija uno de los eventos layout púrpura. DevTools proporciona más información sobre el evento en el panel Resumen. De hecho, hay una advertencia sobre los flujos forzados (otra palabra para layout).

  7. En el panel Resumen, elija el ** vínculoapp.js:71** en Diseño forzado. DevTools te lleva a la línea de código que forzó el diseño.

    La línea de código que provocó el diseño forzado

    Nota

    El problema con el código es que, en cada fotograma de animación, cambia el estilo de cada icono y, a continuación, consulta la posición de cada icono en la página. Dado que los estilos cambiaron, el explorador no sabe si cada posición de icono cambió, por lo que debe volver a diseño el icono para calcular la nueva posición.

Eso era mucho que aprender. Ahora tiene una base sólida en el flujo de trabajo básico para analizar el rendimiento en tiempo de ejecución. Buen trabajo.

Bonus: Analizar la versión optimizada

Con los flujos de trabajo y las herramientas que acaba de aprender, elija Optimizar en la demostración para habilitar el código optimizado, realizar otra grabación de rendimiento y, a continuación, analizar los resultados. Desde la velocidad de fotogramas mejorada hasta la **** reducción de eventos en el gráfico de llamas en la sección Principal, la versión optimizada de la aplicación hace mucho menos trabajo, lo que resulta en un mejor rendimiento.

Nota

Incluso la versión optimizada no es excelente, ya que manipula la top propiedad de cada icono. Un enfoque mejor es seguir las propiedades que solo afectan a la composición.

Pasos siguientes

Para sentirse más cómodo con la herramienta Rendimiento, la práctica hace que sea perfecto. Intente generar perfiles de las páginas y analizar los resultados. Si tienes alguna pregunta sobre los **** resultados, usa el icono Enviar comentarios, selecciona Alt + Shift + I (Windows, Linux), Option + Shift + I selecciona (macOS) o tuiteael equipo de DevTools . Incluya capturas de pantalla o vínculos a páginas reproducibles, si es posible.

El icono **Comentarios** en Microsoft Edge DevTools

Por último, hay muchas formas de mejorar el rendimiento en tiempo de ejecución. Este artículo se ha centrado en un cuello de botella de animación determinado para ofrecerte un recorrido centrado a través del panel Rendimiento, pero solo es uno de los muchos cuellos de botella que puedes encontrar.

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0.
La página original se encuentra aquí y está redactada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.