Análisis del rendimiento en tiempo de ejecución (tutorial)

El rendimiento en tiempo de ejecución es el rendimiento de la página web cuando se ejecuta, en lugar de cargarla. En el tutorial siguiente se explica cómo usar la herramienta Rendimiento de DevTools para analizar el rendimiento en tiempo de ejecución.

Las aptitudes que aprende en este tutorial son útiles para analizar la carga, la interactividad y la estabilidad visual del contenido web, que también son indicadores clave para Core Web Vitals. Cada uno de los núcleos web vitales representa una faceta distinta de la experiencia del usuario, es medible en el campo y refleja la experiencia real de un resultado crítico centrado en el usuario. Puede ver estos aspectos básicos de Web Vital en la herramienta de rendimiento .

Consulta también:

• Aspectos vitales web en web.dev.
• Terminología en la herramienta de rendimiento: analice el rendimiento de su sitio web.
• Optimizar la velocidad de un sitio web con Lighthouse

Paso 1: Abra la demostración en modo InPrivate y abra DevTools.

En el siguiente tutorial, abre DevTools en la página web de demostración "Sluggish Animation" y usa la herramienta Performance 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, que 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 ejecuta en un estado limpio. Por ejemplo, si tiene muchas extensiones instaladas, esas extensiones podrían crear ruido en las medidas de rendimiento. Si desea obtener más información, consulte Examinar InPrivate en Microsoft Edge.

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

   Se abre DevTools:

   

3. En la esquina superior derecha de DevTools, haga clic en el botón Personalizar y controlar DevTools () y, después, junto a Ubicación de acoplamiento, haga clic en el botón Desacoplar en ventana independiente ().

Paso 2: Limitar la CPU para simular una CPU móvil

Los dispositivos móviles tienen mucha menos energía de CPU que los equipos de escritorio y portátiles. Cada vez 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 de la máquina 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 Capturar configuración ().

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

3. En el menú desplegable Limitación de CPU de la esquina superior izquierda, seleccione el valor de ralentización recomendado, como 4x slowdown (recomendado):

   

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

   DevTools calcula el factor de limitación recomendado en función del equipo. Para asegurarse de que una página web funciona bien en dispositivos móviles incluso inferiores, seleccione una mayor ralentización en la lista desplegable Limitación de CPU , como la ralentización 6 veces.

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

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

4. Haga clic en el botón Capturar configuración ().

   Los menús desplegables de configuración y las casillas 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 el rendimiento, 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 a no optimizado.

Para crear un par de grabaciones de rendimiento para comparar el código no optimizado o no optimizado, la página web de demostración primero debe mostrar un determinado número de iconos móviles, en función de la máquina. Debería haber suficientes iconos para que pueda ver claramente una diferencia en la velocidad y 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 animación lenta.

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

2. Haga 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 Optimizado .

   Los iconos se mueven más rápido y sin problemas.

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

   Si hay demasiados iconos, se agota la CPU 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

Al ejecutar 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 aprender a 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 Lento .

   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 de 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 estando limitada. (Estas capturas de pantalla deben mostrar el icono de advertencia de limitación () en la pestaña de la herramienta Rendimiento de la barra de actividad).

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, a continuación, muestra los resultados en la herramienta Rendimiento :

   

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

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

Una vez que tenga una grabación del rendimiento de la página web, puede 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 de CPU corresponden a 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 ha agotado durante la grabación. Cada vez que la CPU se agota durante largos períodos, eso es un indicador de que la página web no funciona 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 hacia la izquierda y la derecha para reproducir la grabación.

   Esta acción se denomina limpieza y resulta útil para analizar manualmente la progresión de la grabación de rendimiento.

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

Otra herramienta práctica es la superposición Estadísticas de representación de fotogramas , a veces denominada medidor de FPS. La superposición 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 Estadísticas de representación de fotogramas no es necesaria para este tutorial, pero puede proporcionar información útil.

1. En la esquina superior derecha de DevTools, haga clic en el botón Personalizar y controlar DevTools () y, a continuación, seleccione Alternar 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 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 Representación , active la casilla Estadísticas de representación de fotogramas :

   

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

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

   

   La superposición tiene las secciones siguientes:

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

   Desactive la superposición:

5. Cambie a la ventana DevTools.

6. En la herramienta Representación , desactive la casilla Estadísticas de representación de fotogramas .

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

   O bien, 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: Buscar 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 ha dedicado la mayor parte del tiempo a la representación. Dado que el rendimiento es el arte de hacer menos trabajo, su objetivo es reducir la cantidad de tiempo dedicado a realizar el trabajo de representación.

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, con el tiempo:

   

   • El eje X representa la grabación, con el tiempo. Cada barra representa un evento. Una barra más amplia 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.

   Hay muchos datos en la grabación.

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

   

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

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

   Otra manera 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 para mover la selección a la derecha.

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

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

   El panel Resumen muestra información sobre ese evento:

   

5. Haga clic en el vínculo Mostrar .

   DevTools resalta el evento que inició el evento Desencadenado por 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. Acerca el evento Desencadenado por fotograma de animación y sus eventos secundarios, usando la rueda del mouse o el trackpad.

   O bien, presione W.

   Ahora puede ver los eventos que se producen cuando se representa un único 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 Recalculate Style y Layout :

   

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" (re layout).

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, a continuación, consulta la posición de cada icono en la página web. Dado que los estilos han cambiado, el explorador no sabe si ha cambiado la posición de cada icono, 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 en Evitar diseños grandes y complejos y la reducción de diseño en web.dev.

Paso 8: Registrar el rendimiento del código optimizado

Ha registrado el rendimiento del código no optimizado anteriormente.

Registre el rendimiento optimizado del código, 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 Detener () o en el botón Detener .

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

Paso 9: Analizar el rendimiento del código optimizado

• Con los flujos de trabajo y las herramientas que acaba de aprender, analice los resultados del rendimiento, como en El paso 5: Analizar el rendimiento del código no optimizado anteriormente.

  Desde la velocidad de fotogramas mejorada hasta la reducción de eventos en el gráfico de llamas de la sección Principal , la versión optimizada de la aplicación hace mucho menos trabajo, lo que da como resultado un mejor rendimiento.

Paso 10: Analizar el código no optimizado

Compare este fragmento de código de JavaScript desde 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 único 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 asegurarse 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 los estilos insertados en el elemento.

Por último, leemos element.offsetTop de nuevo, para ajustar la dirección del icono.

Paso 11: Analizar el código optimizado

El código optimizado usa 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 usando element.offsetTop. El uso del estilo insertado 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 vuelva a calcular los estilos y el diseño.

A continuación, ajustamos la dirección del icono, pero esta vez no se vuelve a leer element.offsetTop como se hace en la versión no optimizada.

Por último, 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. Cuando se usa la transform propiedad , el explorador considera cada icono como una capa individual y, a continuación, muestra estas capas en las posiciones correctas mediante la reconfiguración de la imagen final.

Consulta también:

• Evitar propiedades que desencadenen diseño o pintura en Cómo crear animaciones CSS de alto rendimiento en web.dev.
• Transición de opacidaden MDN.

Paso 12: Restablecer la configuración de DevTools

1. Cambie a la ventana DevTools desacoplada.

2. En la herramienta Rendimiento , haga clic en el botón Capturar configuración ().

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

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

   DevTools deja de limitar la CPU. El icono de advertencia se quita de la pestaña de la herramienta Rendimiento .

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

Pasos siguientes

Para sentirse más cómodo con la herramienta Rendimiento , practique la generación de perfiles de las páginas web y el análisis de los resultados.

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

O bien, escriba un problema en el repositorio MicrosoftEdge/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 ofrecerle un recorrido centrado por la herramienta Rendimiento , pero es solo uno de los muchos cuellos de botella que puede encontrar.

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á creada por Kayce Basques.

Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.