Analizar el rendimiento en tiempo de ejecución (tutorial)

El rendimiento en tiempo de ejecución es el rendimiento de la página web cuando se está ejecutando, en lugar de cargarse. En el tutorial siguiente se enseña a usar la herramienta Rendimiento de DevTools para analizar el rendimiento en tiempo de ejecución.

Las habilidades que aprendes en este tutorial son útiles para analizar la carga, la interactividad y la estabilidad visual de tu contenido web, que también son indicadores clave para Core Web Vitals. Cada uno de los Core Web Vitals representa una faceta distinta de la experiencia del usuario, es medible en el campo y refleja la experiencia del mundo real de un resultado crítico centrado en el usuario. Puede ver estos Core Web Vitals en la herramienta Rendimiento .

Consulta también:

• Web Vitals en web.dev.
• Terminología en la herramienta Rendimiento: Analice el rendimiento de su sitio web.
• Optimizar la velocidad de un sitio web con Lighthouse

Paso 1: Abrir la demostración en modo InPrivate y abrir DevTools

En el siguiente tutorial, abre DevTools en la página web de demostración "Animación lenta" y usa la herramienta de rendimiento para encontrar un cuello de botella de rendimiento en la página web.

1. Haga clic con el botón derecho en el vínculo Animación lenta y, a continuación, seleccione Abrir vínculo en la ventana InPrivate.

   Creará un perfil de esta página web de demostración, en la que se muestra un número variable de iconos que se mueven hacia arriba y hacia abajo. Si desea ver el código fuente de la demostración, consulte MicrosoftEdge / Demos > devtools-performance-get-started.

   El modo InPrivate garantiza que el explorador se ejecute en un estado limpio. Por ejemplo, si tiene muchas extensiones instaladas, esas extensiones pueden crear ruido en las mediciones de rendimiento. Si desea obtener más información, consulte Explorar con InPrivate en Microsoft Edge.

2. Haga clic con el botón derecho en la página web de demostración y seleccione Inspeccionar.

   Se abre DevTools:

   

3. En la parte superior derecha de DevTools, haga clic en el botón Personalizar y controlar DevTools () y, a continuación, junto a la ubicación de Acoplar, haga clic en el botón Desacoplar en una ventana independiente ().

Paso 2: Limitar la CPU para 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 genere perfiles de una página web, use la limitación de CPU para simular el rendimiento de la página web en dispositivos móviles.

Limite la CPU del equipo de escritorio para simular una CPU móvil, como se indica a continuación:

1. En DevTools, abra la herramienta Rendimiento ().

2. Haga clic en el botón Configuración de Captura ().

   DevTools muestra la configuración, menús desplegables y casillas relacionadas con la captura de métricas de rendimiento.

3. En el menú desplegable Limitación de CPU en la parte superior izquierda, selecciona el valor de ralentización recomendado, como ralentización 4x - recomendado:

   

   O bien, en la sección Configuración del entorno de la esquina inferior derecha, en el menú desplegable de limitación de CPU , seleccione el valor de ralentización recomendado, como Ralentización 4x: recomendada. Las dos instancias del menú desplegable están vinculadas.

   DevTools calcula el factor de limitación recomendado en función de su máquina. Para asegurarse de que una página web funciona bien incluso en dispositivos móviles de gama baja, seleccione una ralentización mayor en la lista desplegable de limitación de CPU, como una ralentización de 6x.

   DevTools limita la CPU para que sea más lenta de lo habitual.

   Aparece un icono de advertencia de limitación () en la pestaña de la herramienta Rendimiento para recordarle que la limitación está habilitada.

4. Haga clic en el botón Configuración de Captura ().

   Los menús desplegables y las casillas de verificación de la configuración relacionados con la captura de métricas de rendimiento están ocultos.

Paso 3: Rellenar la página web con un número ideal de iconos

Antes de grabar la actuación, rellene la página web de demostración con un número ideal de iconos para ayudar a comparar el código no optimizado frente al código optimizado.

Para crear un par de grabaciones de rendimiento para comparar el código no optimizado frente al código optimizado, la página web de demostración primero debe mostrar un cierto número de iconos en movimiento, dependiendo de su máquina. Debe haber suficientes iconos para que pueda ver claramente la diferencia en la velocidad y la suavidad de la animación al alternar entre seleccionar el código no optimizado (lento) y el código optimizado .

Para rellenar la página web de demostración con un número ideal de iconos:

1. Cambie a la página web de demostración de Sluggish Animation.

   El botón de opción de ralentización se selecciona inicialmente, de forma predeterminada, para que se utilice el código no optimizado.

2. Haz clic en el botón Agregar elementos varias veces, hasta que los iconos azules empiecen a moverse muy lenta y erráticamente.

3. Seleccione el botón de opción Optimizada .

   Los iconos se mueven más rápida y suavemente.

4. Si no ve una diferencia notable entre usar el código no optimizado (lento) y optimizado, intente hacer clic en el botón Quitar elementos.

   Si hay demasiados iconos, la CPU maximiza y no se ve una diferencia importante en los resultados de las dos versiones del código.

Paso 4: Registrar el rendimiento del código no optimizado

Cuando ejecutas la versión optimizada del código de la página web, los iconos azules se mueven más rápido. ¿Por qué? Se supone que ambas versiones del código mueven los iconos la misma cantidad de espacio en la misma cantidad de tiempo.

Realice una grabación en la herramienta Rendimiento para obtener información sobre cómo detectar el cuello de botella de rendimiento en la versión no optimizada (lenta) del código:

1. En la página web de demostración, seleccione el botón de opción Modo aplazado .

   Los iconos se mueven más lenta y erráticamente. El código no optimizado se está ejecutando y se generará un perfil, y hay un número ideal de iconos para demostrar un rendimiento deficiente y ayudar a encontrar el cuello de botella del rendimiento.

2. En la ventana DevTools, en la herramienta Rendimiento, haga clic en el botón Grabar.

   DevTools captura las métricas de rendimiento a medida que se ejecuta la página web:

   

   La CPU sigue limitada. (Estas capturas de pantalla deben mostrar el icono de advertencia de limitación (icono de advertencia de) en la pestaña de la herramienta Rendimiento en la Barra de Actividades).

3. Espere unos segundos y haga clic en el icono Detener () o en el botón Detener .

   DevTools detiene la grabación, procesa los datos y muestra los resultados en la herramienta Rendimiento :

   

Estos resultados de rendimiento muestran una cantidad abrumadora de datos, pero todo tendrá más sentido en breve.

Paso 5: Analizar el rendimiento del código no optimizado

Una vez que tengas un registro del rendimiento de la página web, puedes evaluar el rendimiento de la página web y encontrar la causa de los problemas de rendimiento.

1. En la parte superior de la herramienta Rendimiento , examine el gráfico de CPU :

   

   Los colores del gráfico CPU se corresponden con los colores del panel Resumen , en la parte inferior de la herramienta Rendimiento . El gráfico de CPU muestra que estas regiones constituyen un área grande, lo que significa que la CPU se agotó durante la grabación. Siempre que la CPU esté al máximo durante períodos prolongados, eso es un indicador de que la página web no está funcionando bien.

2. Mantenga el puntero sobre los gráficos de CPU o NET :

   

   DevTools muestra una captura de pantalla de la página web en ese momento.

3. Mueva el mouse a la izquierda y a la derecha para reproducir la grabación.

   Esta acción se denomina depuración y es útil para analizar manualmente la progresión de la grabación del rendimiento.

Paso 6: Mostrar la superposición de estadísticas de representación de fotogramas

Otra herramienta útil es la superposición de estadísticas de renderizado de fotogramas , a veces llamada medidor de FPS. La superposición de estadísticas de representación de fotogramas proporciona estimaciones en tiempo real de fotogramas por segundo (FPS) mientras se ejecuta la página web. La superposición de estadísticas de representación de fotogramas no es necesaria para este tutorial, pero puede proporcionar información útil.

1. En la parte superior derecha de DevTools, haga clic en el botón Personalizar y controlar DevTools () y, a continuación, seleccione Alternar el panel Vista rápida.

   O bien, presione Esc una o dos veces.

   El panel Vista rápida se muestra en la parte inferior de DevTools.

2. En la barra de herramientas de Vista rápida , haga clic en el botón Más herramientas () y, a continuación, seleccione Representación.

   La herramienta Representación se abre en el panel Vista rápida .

3. En la herramienta Renderización , seleccione la casilla de verificación Estadísticas de representación de fotogramas :

   

4. Cambia a la página web de demostración.

   Se muestra la superposición de estadísticas de representación de fotogramas:

   

   La superposición tiene las siguientes secciones:

   • Velocidad de fotogramas
   • Ráster de GPU
   • Memoria GPU

   Desactive la superposición:

5. Cambiar a la ventana DevTools.

6. En la herramienta Renderizado , desactive la casilla de verificación Estadísticas de renderizado de fotogramas .

7. En la parte superior derecha de DevTools, haga clic en el botón Personalizar y controlar DevTools () y, a continuación, seleccione Alternar el panel Vista rápida.

   O presione Esc.

   El panel Vista rápida está oculto.

Consulta también:

• Herramienta de renderización, para ver cómo se ve una página web con diferentes opciones de visualización o deficiencias de visión

Paso 7: Encontrar el cuello de botella de rendimiento

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

1. En la parte inferior de la herramienta Rendimiento , seleccione la pestaña Resumen :

   

   Cuando no se selecciona ningún evento, la pestaña Resumen muestra un desglose de la actividad. La página web dedicó la mayor parte del tiempo a representación. Dado que el rendimiento es el arte de hacer menos trabajo, su objetivo es reducir la cantidad de tiempo dedicado al trabajo de renderizado.

2. En la herramienta Rendimiento , haga clic en la fila Principal para expandirla.

   DevTools muestra un gráfico de llama de actividad en el subproceso principal, a lo largo 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 tomó más tiempo.

   • El eje Y representa la pila de llamadas. Cuando los eventos se apilan uno encima del otro, significa que los eventos superiores causaron los eventos inferiores.

   Hay muchos datos en la grabación.

3. En el área Descripción general , debajo de la barra de herramientas, haga clic y arrastre horizontalmente para ampliar una parte de la grabación:

   

   El área Información generalincluye los gráficos CPU y NET (indicados a la derecha).

   La sección principal (debajo de la descripción general) y la pestaña Resumen solo muestran información para la parte seleccionada de la grabación.

   Otra forma de cambiar el área seleccionada es poner el foco en la sección principal , hacer clic en el fondo o en un evento y, a continuación, presionar:

   • W para acercar o S alejar.
   • A para mover la selección a la izquierda o D a la derecha.

4. Haga clic en un evento desencadenado de fotograma de animación .

   Cuando se muestra un triángulo rojo en la parte superior derecha de un evento, es una advertencia de que podría haber un problema relacionado con el evento. El evento Animation Frame Triggered se produce cada vez que se ejecuta una devolución de llamada requestAnimationFrame().

   El panel Resumen muestra información sobre ese evento:

   

5. Haz clic en el enlace Revelar .

   DevTools resalta el evento que inició el evento Activación del fotograma de animación .

6. Haga clic en el vínculo app.js:125 .

   La línea de código fuente correspondiente se muestra en la herramienta Orígenes .

7. Acérquese al evento Fotograma de animación activado y sus eventos secundarios con la rueda del mouse o con el panel táctil.

   O bien, presione W.

   Ahora puede ver los eventos que se producen cuando se representa un solo fotograma de la animación. Se llama a la función update , que, a su vez, llama a la función updateSlow , que desencadena muchos eventos Recalcular estilo y diseño :

   

8. Haga clic en uno de los eventos de diseño púrpura.

   DevTools proporciona más información sobre el evento en el panel Resumen . Hay una advertencia sobre los "reflujos forzados" (rediseño).

9. En el panel Resumen , haga clic en el vínculo app.js:104 en Diseño forzado.

   DevTools le lleva a la línea de código que forzó el diseño en la herramienta Orígenes :

   

El problema con el código no optimizado es que, en cada fotograma de animación, cambia el estilo de cada icono y, después, consulta la posición de cada icono en la página web. Debido a que los estilos cambiaron, el explorador no sabe si la posición de cada icono cambió, por lo que tiene que volver a diseñar el icono para calcular la nueva posición.

Consulta también:

• Evitar diseños sincrónicos forzados in Evitar diseños grandes y complejos y golpes de diseño en web.dev.

Paso 8: registrar el rendimiento del código optimizado

Registró el rendimiento del código no optimizado anterior.

Registre el rendimiento del código optimizado, como se indica a continuación:

1. Haga clic en Optimizado en la página web de demostración para activar el código optimizado.

2. En la ventana DevTools, en la herramienta Rendimiento, haga clic en el botón Grabar.

   DevTools captura las métricas de rendimiento a medida que se ejecuta la página web.

3. Espere unos segundos y haga clic en el icono de detención () o en el botón de parada .

   DevTools detiene la grabación, procesa los datos y luego muestra los resultados en la herramienta Rendimiento .

Paso 9: Analizar el rendimiento del código optimizado

• Usando los flujos de trabajo y las herramientas que acaba de aprender, analice los resultados en el rendimiento, como en el Paso 5: Analice el rendimiento del código no optimizado, arriba.

  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.

Paso 10: Analizar el código no optimizado

Compara este fragmento de código de JavaScript de la versión no optimizada de la aplicación:

// Read the current position.
const currentPos = element.offsetTop;
// Read the direction.
const direction = element.dataset.dir;
// Calculate the next position.
let nextPos = direction === 'up' ? currentPos - SPEED : currentPos + SPEED;

// If the new position is out of bounds, reset it.
if (nextPos < 0) {
  nextPos = 0;
} else if (nextPos > canvas.offsetHeight) {
  nextPos = canvas.offsetHeight;
}

// Set the new position on the element.
element.style.top = `${nextPos}px`;

// Switch the direction if needed.
if (element.offsetTop === 0) {
  element.dataset.dir = 'down';
} else if (element.offsetTop === canvas.offsetHeight) {
  element.dataset.dir = 'up';
}

El fragmento de código anterior se ejecuta en cada fotograma del bucle de representación del explorador, para cada icono azul de la página web. La element variable hace referencia a un solo icono azul.

En esta versión no optimizada, creamos una nextPos variable que se establece en la posición actual del icono, a la que agregamos cierta distancia. La posición actual del icono se lee mediante element.offsetTop.

Después de asegurarnos de que el icono sigue dentro de los límites de la página web, establecemos su nueva posición mediante element.style.top, que establece estilos en línea en el elemento.

Finalmente, volvemos a leer element.offsetTop para ajustar la dirección del icono.

Paso 11: Analizar el código optimizado

El código optimizado utiliza una secuencia diferente de acciones para hacer menos trabajo. Este es el mismo fragmento de código de JavaScript de la versión optimizada de la aplicación:

// Read the current position.
const currentPos = parseFloat(element.style.transform.match(/[0-9.]+/)[0]);
// Read the direction.
const direction = element.dataset.dir;
// Calculate the next position.
let nextPos = direction === 'up' ? currentPos - (SPEED * 100 / canvasHeight) : currentPos + (SPEED * 100 / canvasHeight);

// If the new position is out of bounds, reset it, and switch the direction.
if (nextPos < 0) {
  nextPos = 0;
  element.dataset.dir = 'down';
} else if (nextPos > 100) {
  nextPos = 100;
  element.dataset.dir = 'up';
}

// Set the new position on the element.
element.style.transform = `translateY(${nextPos}vh)`;

En la versión optimizada, primero establecemos el valor de la nextPos variable leyendo element.style.transform en lugar de usar element.offsetTop. El uso del estilo en línea del elemento es más rápido, ya que la lectura element.offsetTop obliga al motor del explorador a saber dónde están todos los elementos en la página web, lo que requiere que el motor recalcule los estilos y el diseño.

Luego ajustamos la dirección del icono, pero esta vez no volvemos a leer element.offsetTop como se hizo en la versión no optimizada.

Finalmente, establecemos la nueva posición del icono, pero esta vez usamos element.style.transform en lugar de element.style.top. El uso element.style.transform es más rápido, ya que el motor de representación del explorador puede aplicar la propiedad CSS transform sin tener que volver a calcular el diseño de la página web. Al utilizar la transform propiedad, el navegador considera cada icono como una capa individual y, a continuación, muestra estas capas en las posiciones correctas al volver a componer la imagen final.

Consulta también:

• Evita las propiedades que activan el diseño o la pinturain Cómo crear animaciones CSS de alto rendimiento en web.dev.
• Opacidad de transición en opacidad en MDN .

Paso 12: Restablecer la configuración de DevTools

1. Cambiar a la ventana de DevTools desacoplada.

2. En la herramienta Rendimiento, haga clic en el botón Configuración de Captura ().

   DevTools muestra la configuración, menús desplegables y casillas relacionadas con la captura de métricas de rendimiento.

3. En el menú desplegable de limitación de CPU de la esquina superior izquierda, seleccione Sin limitación.

   DevTools detiene la limitación de la CPU. El icono de advertencia se quita de la pestaña de la herramienta Rendimiento .

4. En la parte superior derecha de DevTools, haga clic en el botón Personalizar y controlar DevTools () y, a continuación, junto a la ubicación de Acoplar, haga clic en el botón Acoplar a la derecha ().

Pasos siguientes

Para que te resulte más cómodo con la herramienta Rendimiento , practica la generación de perfiles de tus páginas web y el análisis de los resultados.

Si tiene alguna pregunta sobre los resultados, en la barra de actividades, seleccione Ayuda () >Comentarios. O bien, presione Alt+Mayús+I (Windows, Linux) u Opción+Mayús+I (macOS).

O bien, envíe un problema al repositorio de MicrosoftEdge o DevTools.

En sus comentarios, incluya capturas de pantalla o vínculos a páginas web reproducibles, si es posible.

Hay muchas maneras de mejorar el rendimiento en tiempo de ejecución. Este artículo se centró en un cuello de botella de animación en particular para brindarle un recorrido enfocado por la herramienta Rendimiento , pero es solo uno de los muchos cuellos de botella que puede encontrar.

Este trabajo está bajo una licencia Creative Commons Attribution 4.0 International.