Solución de problemas comunes de rendimiento
Los usuarios esperan páginas interactivas y fluidas. Cada fase de la canalización de píxeles representa una oportunidad para introducir jank (interrupciones de la representación). Obtenga información sobre las herramientas y estrategias para identificar y corregir problemas comunes que ralentizan el rendimiento en tiempo de ejecución.
Resumen
No escriba JavaScript que oblige al explorador a recalcular el diseño. Separe las funciones de lectura y escritura, y realice primero las lecturas.
No complica demasiado el CSS. Use menos CSS y mantenga los selectores CSS simples.
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. 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 la aplicación. No permita que JavaScript con un tiempo incorrecto o de ejecución prolongada interfiera con las interacciones del usuario.
JavaScript: Herramientas
Realice una grabación en la herramienta Rendimiento y busque eventos sospechosamente largos Evaluate Script .
Si observa un poco de jank (interrupciones de la representación) en JavaScript, es posible que tenga que llevar el análisis al siguiente nivel y recopilar un perfil de CPU de JavaScript. Los perfiles de CPU muestran dónde se pasa el tiempo de ejecución dentro de las funciones de la página. Obtenga información sobre cómo crear perfiles de CPU en Aceleración del tiempo de ejecución de JavaScript.
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. | Táctil, desplazamiento de paralaje. | Deje que el explorador controle la entrada táctil y los desplazamientos, 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. |
| JavaScript con un tiempo incorrecto que afecta a la respuesta, animación y carga. | El usuario se desplaza justo después de la carga de la página, setTimeout/setInterval. | Optimización del entorno de ejecución de JavaScript: use requestAnimationFrame, distribuya la manipulación DOM sobre marcos y use trabajos web. |
| JavaScript de ejecución prolongada que afecta a la respuesta. | El evento DOMContentLoaded se detiene a medida que se satura con el trabajo de JS. | Mover el trabajo de cálculo puro a Trabajos 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. | Escriba menos scripts de elementos no utilizados. Consulte 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 determina el impacto en todos los elementos relacionados, vuelve a calcular el diseño y vuelve a dibujar.
Estilo: Herramientas
Realice una grabación en la herramienta Rendimiento . Compruebe la grabación de eventos grandes Recalculate Style (que se muestran en color púrpura).
Seleccione un Recalculate Style evento para ver más información sobre él en el panel Detalles . Si los cambios de estilo tardan mucho tiempo, se trata de una acierto en el rendimiento. Si los cálculos de estilo afectan a un gran número de elementos, esa es otra área con espacio para mejorar.
Para reducir el impacto de Recalculate Style los eventos, minimice el uso de propiedades CSS que desencadenan el diseño, la pintura y la composición. Estas propiedades tienen el mayor impacto en el rendimiento de la representación. Para obtener más información, consulte Stick to Compositor-Only Properties and Manage Layer Count
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 costosos que afectan a la respuesta o animación. | Cualquier propiedad CSS que cambie la geometría de un elemento, como el ancho, el alto o la 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 obligan al explorador a conocer todo lo relacionado con todos los demás elementos, incluidos los elementos primarios e secundarios. | Haga referencia a un elemento de css con solo una clase. |
Diseño
El diseño (o reflujo en Firefox) es el proceso por el que 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 <body> elemento normalmente afecta a los anchos de cualquier elemento secundario, etc., hasta arriba y 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 produce diseños sincrónicos forzados. Estos Layout eventos se marcan con barras rojas.
"Cambio de diseño" es una repetición de condiciones de diseño sincrónicas forzadas. Esto ocurre cuando JavaScript escribe y lee desde el DOM repetidamente, lo que obliga al explorador a volver a calcular el diseño una y otra vez. Para identificar el cambio de diseño, busque un patrón de varias advertencias de diseño sincrónico forzado. Consulte la ilustración anterior.
Diseño: problemas
En la tabla siguiente se describen algunos problemas de diseño comunes 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 lugar a pasos repetidos en el proceso de representación. | Primero se lee por lotes el estilo y, a continuación, se realizan las escrituras. |
| La reducción de diseño que afecta a la respuesta o animación. | Bucle que coloca el explorador en un ciclo de lectura y escritura de lectura y escritura, lo que obliga al explorador a volver a calcular el diseño una y otra vez. | Operaciones de lectura y escritura por lotes automáticamente mediante la biblioteca FastDom. |
Pintura y composición
La pintura es el proceso de rellenar píxeles. A menudo es la parte más costosa del proceso de representación. Si ha observado 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 pintadas de la página para mostrar en pantalla. En la mayoría de los casos, si se mantienen las propiedades de solo compositor y se evita la pintura por completo, se debe observar una mejora importante en el rendimiento, pero es necesario watch para recuentos excesivos de capas.
Pintura y composición: Herramientas
Para averiguar cuánto tiempo tarda la pintura o con qué frecuencia se produce la pintura:
En DevTools, en la herramienta Rendimiento , haga clic en el botón Capturar configuración (
") y, a continuación, seleccione la casilla Habilitar instrumentación de representación avanzada .Tome una grabación.
Si la mayor parte del tiempo de representación se dedica a pintar, tiene problemas de pintura. Para obtener más información, vea Activar la instrumentación de representación avanzada en la referencia de características de rendimiento.
Pintura y composición: Problemas
En la tabla siguiente se describen algunos problemas comunes de pintura y composición y posibles soluciones.
| Problema | Por ejemplo: | Solución |
|---|---|---|
| Pinta 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 pintar, promover elementos que se mueven a su propia capa, use transformaciones y opacidad. |
| Explosiones de capas que afectan a animaciones. | La sobremomoción de demasiados elementos con translateZ(0) afecta enormemente al rendimiento de la animación. |
Promover a 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á creada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) y Meggin Kearney (Escritor técnico).
Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.