Analizar el rendimiento en tiempo de ejecución

Los usuarios esperan páginas interactivas y suaves. Cada fase de la canalización de píxeles representa una oportunidad de introducir Jank. Obtenga más información sobre las herramientas y estrategias para identificar y solucionar problemas comunes que ralentizan el rendimiento del tiempo de ejecución.

Resumen

  • No escriba JavaScript que obligue al explorador a volver a calcular el diseño. Funciones de lectura y escritura distintas y realice lecturas en primer lugar.
  • No complica demasiado tu CSS. Usa menos CSS y conserva tus selectores de CSS.
  • Evite el diseño tanto como sea posible. Elija CSS que no desencadene el diseño.
  • La pintura puede tardar más tiempo que cualquier otra actividad de representación. Mire los cuellos de botella de pintura.

JavaScript

Los cálculos de JavaScript, especialmente aquellos que desencadenan cambios visuales extensivos, pueden detener el rendimiento de la aplicación. No permita que los JavaScript con tiempos inesperados o de ejecución prolongada interfieran con las interacciones del usuario.

JavaScript: herramientas

Toma una grabación en el panel rendimiento y busca eventos que sean sospechosos Evaluate Script .

Si recibes bastante Jank en tu código JavaScript, es posible que necesites llevar el análisis al siguiente nivel y recopilar un perfil de CPU de JavaScript. Los perfiles de CPU muestran dónde se gasta el motor en tiempo de ejecución dentro de las funciones de la página. Aprenda a crear perfiles de CPU para acelerar el tiempo de ejecución de JavaScript.

JavaScript: problemas

En la siguiente tabla se describen algunos problemas comunes de JavaScript y posibles soluciones:

Problema Ejemplo Solución
Controladores de entrada caros que afectan a la respuesta o animación. Táctil, desplazamiento de Parallax. Deje que el explorador controle la entrada táctil y se desplace, o enlace el agente de escucha lo más tarde posible. Consulte controladores de entrada costosos en la lista de comprobación de rendimiento en tiempo de ejecución de Paul Lewis.
La respuesta, la animación y la carga de JavaScript es muy incorrecta. El usuario se desplaza a la derecha después de cargar la página, setTimeout/setInterval. Optimizar tiempo de ejecución de JavaScript: uso requestAnimationFrame , manipulación de Dom de propagación sobre marcos, uso de trabajadores web.
JavaScript de ejecución prolongada que afecta a la respuesta. El evento DOMContentLoaded se detiene porque está inundado con el trabajo de JS. Mover trabajo de cálculo puro a los trabajadores web. Si necesita acceso a DOM, use requestAnimationFrame .
Scripts de elementos no utilizados que afectan a la respuesta o animación. La recolección de elementos no utilizados puede producirse en cualquier lugar. Escribir menos scripts y de elementos no utilizados. Consulte recolección de elementos no utilizados en la animación de la lista de comprobación de rendimiento en tiempo de ejecución de Paul Lewis.

Estilo

Los cambios de estilo son costosos, especialmente si esos cambios afectan a más de un elemento en el DOM. Cada vez que se aplican estilos a un elemento, el explorador determina el impacto en todos los elementos relacionados, vuelve a calcular el diseño y el redibujado.

Estilo: herramientas

Realizar una grabación en el panel rendimiento . Compruebe la grabación de Recalculate Style eventos grandes \ (mostrada en color púrpura ).

Haga clic en un Recalculate Style evento para ver más información sobre él en el panel de detalles . Si los cambios de estilo están tardando mucho, eso es un impacto en el rendimiento. Si los cálculos de estilo afectan a un gran número de elementos, se trata de otra área con espacio para mejorarlo.

Recalcular largo estilo

Para reducir el impacto de Recalculate Style los eventos:

  • Use los desencadenadores de CSS para saber qué propiedades de CSS desencadenan diseño, pintura y composición. Estas propiedades tienen el peor impacto en el rendimiento de la representación.
  • Cambiar a propiedades que tienen menos impacto.

Estilo: problemas

En la siguiente tabla se describen algunos problemas de estilo comunes y posibles soluciones:

Problema Ejemplo Solución
Cálculos de estilo caros que afectan a la respuesta o animación. Cualquier propiedad de CSS que cambie la geometría de un elemento, como el ancho, alto o posición; el explorador comprueba el resto de los elementos y vuelve a calcular el diseño. Evitar CSS que desencadenan diseños
Selectores complejos que afectan a la respuesta o a la animación. Los selectores anidados obligan al explorador a conocer todo el resto de los elementos, incluidos los elementos primarios y secundarios. Haga referencia a un elemento de su CSS con solo una clase.

Diseño

Diseño (o redistribución en Firefox) es el proceso por el cual el explorador calcula las posiciones y los tamaños de todos los elementos de una página. El modelo de diseño de la web significa que un elemento puede afectar a otros; por ejemplo, el ancho del <body> elemento afecta normalmente a los anchos de los elementos secundarios, y así sucesivamente, todo el recorrido hacia arriba y hacia abajo en el árbol. El proceso puede estar bastante implicado para el explorador.

Como regla general, si solicita un valor geométrico al DOM antes de que se complete un marco, se encontrará con "diseños sincrónicos forzados", que puede ser un gran cuello de botella de rendimiento si se repite con frecuencia o se realiza para un gran árbol de DOM.

Diseño: herramientas

El panel rendimiento identifica cuando una página provoca diseños sincrónicos forzados. Estos Layout eventos se marcan con barras rojas.

Diseño sincrónico forzado

"La hiperpaginación de diseño" es una repetición de las condiciones de diseño sincrónico forzado. Esto se produce cuando JavaScript escribe y Lee de forma repetida desde el DOM, lo que obliga al explorador a volver a calcular el diseño una y otra vez. Para identificar la hiperpaginación de la distribución, busque un patrón de advertencias de diseño sincrónico forzado. Vea la ilustración anterior.

Diseño: problemas

En la siguiente tabla se describen algunos problemas de diseño comunes y posibles soluciones:

Problema Ejemplo Solución
Diseño sincrónico forzado que afecta a la respuesta o animación. Obligar al explorador a realizar el diseño anteriormente en la canalización de píxeles, lo que da como resultado pasos repetitivos en el proceso de representación. Por lotes el estilo se lee en primer lugar y luego realiza cualquier escritura.
La hiperpaginación de diseño afecta a la respuesta o animación. Un bucle que pone el explorador en un ciclo de lectura y escritura (lectura y escritura), lo que obliga al explorador a volver a calcular la presentación una y otra vez. Procesar automáticamente las operaciones de lectura y escritura con la biblioteca FastDom.

Pintura y composición

Paint es el proceso de rellenar píxeles. Suele ser la parte más costosa del proceso de representación. Si se ha dado cuenta de que la página se Janky de ninguna manera, es posible que tenga problemas de pintura.

La composición es el lugar donde se agrupan las partes pintadas de la página para mostrarse en pantalla. En su mayor parte, si se fija en las propiedades solo de compositor y se evita que se pinte por completo, debería apreciarse una mejora importante en el rendimiento, pero debe tener cuidado con el recuento excesivo de capas.

Pintura y composición: herramientas

¿Quiere saber cuánto tarda el pintado o la frecuencia con la que se produce la pintura? Active la opción Habilitar el instrumental de pintura avanzada en el panel rendimiento y, después, realice una grabación. Si se gasta la mayor parte del tiempo de procesamiento, tiene problemas de pintura.

Pintura y composición: problemas

En la siguiente tabla se describen algunos problemas comunes de Paint y compuestos y posibles soluciones:

Problema Ejemplo Solución
Las tormentas de pintura afectan a la respuesta o animación. Grandes áreas de pintura o pinturas caras que afectan a la respuesta o animación. Evite pintar, promocionar elementos que estén desplazándose a su propia capa, usar transformaciones y opacidad.
Explosiones de capas que afectan a las animaciones. Exceso de la promoción de demasiados elementos con el rendimiento de la translateZ(0) animación. Promueve a capas con moderación, y solo cuando sepa que ofrece mejoras tangibles.

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á modificada por Kayce vascos \ (redactor técnico, Chrome DevTools \ & Lighthouse ) y Meggin Kearney \ (Tech Writer ).

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