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 para introducir jank. Obtenga información sobre herramientas y estrategias para identificar y corregir problemas comunes que ralentizan el rendimiento en tiempo de ejecución.
Resumen
- No escriba JavaScript que fuerza al explorador a volver a calcular el diseño. Separe las funciones de lectura y escritura y realice primero lecturas.
- No complique en exceso su CSS. Use menos CSS y mantenga los selectores CSS sencillos.
- Evite el diseño tanto como sea posible. Elija CSS que no desencadene el diseño en absoluto.
- La pintura puede tardar más tiempo que cualquier otra actividad de representación. Cuidado con los cuellos de botella de pintura.
JavaScript
Los cálculos de JavaScript, especialmente los que desencadenan grandes cambios visuales, pueden detener el rendimiento de las aplicaciones. No permita que JavaScript con un tiempo mal definido o de ejecución larga interfiera con las interacciones del usuario.
JavaScript: herramientas
Haga una grabación en la herramienta Rendimiento y busque eventos sospechosamente Evaluate Script largos.
Si observa bastante jank (interrupciones de representación) en JavaScript, es posible que deba llevar el análisis al siguiente nivel y recopilar un perfil de CPU de JavaScript. Los perfiles de CPU muestran dónde se usa el tiempo de ejecución dentro de las funciones de la página. Obtenga información sobre cómo crear perfiles de CPU en Speed up JavaScript runtime.
JavaScript: problemas
En la tabla siguiente se describen algunos problemas comunes de JavaScript y posibles soluciones.
| Problema | Por ejemplo: | Solución |
|---|---|---|
| Controladores de entrada caros que afectan a la respuesta o animación. | Desplazamiento táctil y paralaje. | Permitir que el explorador controle los desplazamientos y los contactos táctiles, o enlazar el agente de escucha lo más tarde posible. Consulta Controladores de entrada caros en lalista de comprobación de rendimiento en tiempo de ejecución de Paul Lewis . |
| JavaScript mal timed que afecta a la respuesta, animación, carga. | El usuario se desplaza justo después de la carga de página, setTimeout / setInterval. | Optimizar el tiempo de ejecución de JavaScript: use requestAnimationFrame , extienda la manipulación de DOM en fotogramas, use Trabajadores web. |
| JavaScript de ejecución larga que afecta a la respuesta. | El evento DOMContentLoaded se detiene cuando está saturado de trabajo de JS. | Mover el trabajo computacional puro a Trabajadores web. Si necesita acceso 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 de elementos no utilizados. Consulta Recolección de elementos no utilizados en Animación en 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 del DOM. Cada vez que se aplican estilos a un elemento, el explorador calcula el impacto en todos los elementos relacionados, vuelve a calcular el diseño y vuelve a pintar.
Estilo: herramientas
Realizar una grabación en la herramienta Rendimiento. Compruebe si hay eventos grandes en la grabación Recalculate Style (que se muestran en púrpura).
Elija un Recalculate Style evento para ver más información sobre él en el panel Detalles. Si los cambios de estilo tardan mucho tiempo, es un éxito de rendimiento. Si los cálculos de estilo afectan a un gran número de elementos, ese es otro área con espacio para mejorar.
Para reducir el impacto de los Recalculate Style eventos:
- Usa los desencadenadores CSS para saber qué propiedades CSS desencadenan el diseño, la pintura y la composición. Estas propiedades tienen el peor impacto en el rendimiento de representación.
- Cambie a las propiedades que tienen menos impacto.
Estilo: problemas
En la tabla siguiente se describen algunos problemas de estilo comunes y posibles soluciones.
| Problema | Por ejemplo: | Solución |
|---|---|---|
| Cálculos de estilo caros que afectan a la respuesta o animación. | Cualquier propiedad CSS que cambie la geometría de un elemento, como el ancho, alto o posición; el explorador comprueba todos los demás elementos y vuelve a calcular el diseño. | Evitar CSS que desencadena diseños |
| Selectores complejos que afectan a la respuesta o animación. | Los selectores anidados fuerzan al explorador a saber todo sobre todos los demás elementos, incluidos los elementos principales y los elementos secundarios. | Haga referencia a un elemento de su CSS con solo una clase. |
Diseño
El diseño (o reflujo en Firefox) es el proceso mediante el cual el explorador calcula las posiciones y 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 elemento suele afectar a los anchos de los elementos secundarios, y así sucesivamente, hasta arriba y <body> abajo del árbol. El proceso puede estar bastante implicado para el explorador.
Como regla general, si solicita un valor geométrico del DOM antes de que se complete un marco, se encontrará con "diseños sincrónicos forzados", lo que puede ser un gran cuello de botella de rendimiento si se repite con frecuencia o se realiza para un árbol DOM grande.
Diseño: Herramientas
El panel Rendimiento identifica cuándo una página provoca diseños sincrónicos forzados. Estos Layout eventos se marcan con barras rojas.
"Thrashing de diseño" es una repetición de condiciones de diseño sincrónica forzadas. Esto ocurre cuando JavaScript escribe y lee el DOM repetidamente, lo que fuerza al explorador a volver a calcular el diseño una y otra vez. Para identificar la thrashing de diseño, busque un patrón de varias advertencias de diseño sincrónico forzado. Revise la figura anterior.
Diseño: problemas
En la tabla siguiente se describen algunos problemas comunes de diseño y posibles soluciones.
| Problema | Por ejemplo: | Solución |
|---|---|---|
| Diseño sincrónico forzado que afecta a la respuesta o animación. | Forzar al explorador a realizar el diseño anteriormente en la canalización de píxeles, lo que da como resultado la repetición de pasos en el proceso de representación. | Primero se lee por lotes el estilo y, a continuación, se hacen las escrituras. |
| Diseño thrashing que afecta a la respuesta o animación. | Bucle que coloca al explorador en un ciclo de lectura y escritura y lectura, lo que obliga al explorador a volver a calcular el diseño una y otra vez. | Procesar por lotes automáticamente operaciones de lectura y escritura con la biblioteca FastDom. |
Paint y compuesto
Paint es el proceso de relleno en píxeles. Suele ser la parte más costosa del proceso de representación. Si notó que la página no funciona como está diseñada de ninguna manera, es probable que tenga problemas de pintura.
La composición es donde se reúnen las partes de la página que se pintan para mostrarse en pantalla. En la mayoría de los casos, si te atener a las propiedades de compositor y evitas pintar por completo, deberías observar una mejora importante en el rendimiento, pero debes tener cuidado con los recuentos excesivos de capas.
Paint y compuesto: Herramientas
¿Quiere saber cuánto tarda la pintura o con qué frecuencia se produce la pintura? Compruebe la configuración Habilitar instrumentación avanzada de pintura en el panel Rendimiento y, a continuación, haga una grabación. **** Si la mayor parte del tiempo de representación se dedica a pintar, tiene problemas de pintura.
Paint y compuesto: Problemas
En la tabla siguiente se describen algunos problemas comunes de pintura y compuestos y posibles soluciones.
| Problema | Por ejemplo: | Solución |
|---|---|---|
| Paint tormentas que afectan a la respuesta o animación. | Áreas de pintura grandes o pinturas costosas que afectan a la respuesta o animación. | Evite la pintura, promueva los elementos que se mueven a su propia capa, use transformaciones y opacidad. |
| Explosiones de capas que afectan a animaciones. | La sobrepromoción de demasiados elementos afecta en gran medida translateZ(0) al rendimiento de la animación. |
Promover a las capas con moderación y solo cuando sepa que ofrece mejoras tangibles. |
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) y Meggin Kearney (Technical Writer).
Este trabajo se publica bajo una licencia de Atribución 4.0 Internacional de Creative Commons.