Introducción a la herramienta de rendimiento

El rendimiento en tiempo de ejecución es el rendimiento de la página 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:

• Optimizar la velocidad de un sitio web con Lighthouse

Comenzar

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

1. Abra la página de demostración De animación lenta en la pestaña o ventana InPrivate. Para ello, haga clic con el botón derecho en el vínculo y seleccione Abrir vínculo en la ventana InPrivate. Creará un perfil en esta página, que muestra un número variable de iconos que se mueven hacia arriba y hacia abajo. Para obtener más información sobre InPrivate, consulte Examinar InPrivate en Microsoft Edge.

   Código fuente: MicrosoftEdge/Demos > devtools-performance-get-started.

2. Presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS) para abrir DevTools:

   

En el resto de las capturas de pantalla, DevTools se muestra desacoplado en una ventana independiente.

Simulación de 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, use limitación de CPU para simular el rendimiento de la página en dispositivos móviles.

1. En DevTools, abra la herramienta Rendimiento .

2. Haga clic en Capturar configuración (). DevTools revela la configuración relacionada con cómo captura las métricas de rendimiento.

3. En CPU, seleccione Ralentización 4 veces. DevTools limita la CPU para que sea 4 veces más lenta de lo habitual.

   

   Si desea asegurarse de que las páginas funcionan bien en dispositivos móviles de gama baja, establezca la CPU en 6 veces más lenta.

Configuración de la demostración

La siguiente sección le permite personalizar la demostración para asegurarse de que la experiencia es relativamente coherente con las capturas de pantalla y las descripciones.

1. Haga clic en el botón Agregar elementos hasta que los iconos azules se muevan notablemente más lentos que antes. En una máquina de gama alta, puede hacer clic en ella unas 20 veces.

2. Haga clic en Optimizado. Los iconos azules deben moverse más rápido y sin problemas.

3. Para mostrar mejor una diferencia entre las versiones optimizadas y no optimizadas, haga clic en el botón Quitar elementos varias veces e inténtelo de nuevo. Si agrega demasiados iconos azules, podría maximizar la CPU y, a continuación, podría no observar una diferencia importante en los resultados de las dos versiones.

4. Haga clic en Lento. Los iconos azules se mueven más lentamente y con mayor lentitud de nuevo.

Registro del rendimiento en tiempo de ejecución

Cuando 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. Realice una grabación en la herramienta Rendimiento para aprender a detectar el cuello de botella de rendimiento en la versión no optimizada.

1. En DevTools, haga clic en Registro (). DevTools captura las métricas de rendimiento a medida que se ejecuta la página.

   

2. Espere unos segundos.

3. Haga clic en 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.

Análisis de los resultados

Una vez que tenga una grabación del rendimiento de la página, puede evaluar el rendimiento de la página y encontrar la causa de los problemas de rendimiento.

1. El gráfico de CPU se muestra en la parte superior. 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, es un indicador de que la página 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 en ese momento. Mueva el mouse hacia la izquierda y la derecha para reproducir la grabación. La acción se denomina limpieza y resulta útil para analizar manualmente la progresión de la grabación de rendimiento.

   

Bonus: abrir la superposición Estadísticas de representación de fotogramas

Otra herramienta útil es la superposición Estadísticas de representación de fotogramas, que proporciona estimaciones en tiempo real de FPS a medida que se ejecuta la página. La superposición Estadísticas de representación de fotogramas no es necesaria para este tutorial, pero puede proporcionar información útil.

1. En DevTools, presione Ctrl+Mayús+P (Windows, Linux) o Comando+Mayús+P (macOS) para abrir el menú Comando.

2. Empiece a escribir Rendering en el menú Comandos y haga clic en Mostrar representación.

3. En la herramienta Representación , active Estadísticas de representación de fotogramas. Aparece una nueva superposición en la parte superior izquierda de la página web.

   

4. Cuando haya terminado de revisar los datos de FPS, desactive la casilla Estadísticas de representación de fotogramas para ocultar la superposición.

Búsqueda del cuello de botella

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

1. Cuando no se selecciona ningún evento, el panel Resumen muestra un desglose de la actividad. La página pasó la mayor parte del tiempo representando. 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. Expanda la sección Principal . 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 uno encima del otro, significa que los eventos superiores provocaron los eventos inferiores.

   

3. Hay muchos datos en la grabación. Para acercar una parte de la grabación, haga clic y arrastre el área Información general hacia la parte superior de la herramienta Rendimiento . El área Información general incluye los gráficos de CPU y NET (indicados a la derecha). La sección Principal y el panel 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, S alejar.
   • A para mover la selección a la izquierda, 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 de la página. 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.

Análisis de la versión optimizada

Con los flujos de trabajo y las herramientas que acaba de aprender, haga clic en Optimizado en la página web de demostración para activar 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 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.

Versión no optimizada

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. 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, 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.

Versión optimizada

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 de la página, 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. 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.

Para obtener más información, consulte Uso de cambios de transformación y opacidad para animaciones.

Pasos siguientes

Para sentirse más cómodo con la herramienta Rendimiento , practique la generación de perfiles de las páginas 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 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.

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