Solución de problemas comunes de rendimiento

Los usuarios esperan páginas interactivas y fluidas. Cada etapa de la canalización de píxeles representa una oportunidad para introducir jank (interrupciones del renderizado). Obtén 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 obligue al explorador a recalcular el diseño. Separe las funciones de lectura y escritura, y realice lecturas primero.

• No compliques demasiado tu CSS. Use menos CSS y mantenga sus selectores de CSS simples.

• Evita el diseño tanto como sea posible. Elija CSS que no desencadene el diseño en absoluto.

• La pintura puede llevar más tiempo que cualquier otra actividad de renderizado. Tenga cuidado con los cuellos de botella de pintura.

JavaScript

Los cálculos de JavaScript, especialmente los que desencadenan cambios visuales extensos, pueden detener el rendimiento de la aplicación. No permita que JavaScript de ejecución prolongada o mal programado interfiera con las interacciones del usuario.

JavaScript: Herramientas

Tome una grabación en la herramienta Rendimiento y busque eventos sospechosamente largos Evaluate Script .

Si observas bastantes bloqueos (interrupciones de la representación) en tu JavaScript, es posible que debas llevar tu análisis al siguiente nivel y recopilar un perfil de CPU de JavaScript. Los perfiles de CPU muestran dónde se emplea el tiempo de ejecución dentro de las funciones de la página. Obtén información sobre cómo crear perfiles de CPU en Acelerar el tiempo de ejecución de JavaScript (tipo de generación de perfiles "Muestreo de asignación").

JavaScript: problemas

A continuación se presentan problemas comunes de JavaScript y posibles soluciones.

Problema	Por ejemplo:	Solución
Controladores de entrada costosos que afectan la respuesta o la animación.	Función táctil, desplazamiento de paralaje.	Deje que el explorador controle la entrada táctil y se desplaza, o vincule al oyente lo más tarde posible. Consulte Controladores de entrada costosos en la lista de verificación de rendimiento en tiempo de ejecución de Paul Lewis.
JavaScript mal sincronizado que afecta la respuesta, la animación, la carga.	El usuario se desplaza hacia la derecha después de cargar la página, setTimeout / setInterval.	Optimizar el tiempo de ejecución de JavaScript: use requestAnimationFrame, distribuya la manipulación del DOM sobre fotogramas, use Web Workers; consulte Uso de Web Workers.
JavaScript de larga duración que afecta a la respuesta.	El evento DOMContentLoaded se detiene porque está saturado de trabajo de JavaScript.	Mover trabajo computacional puro a Web Workers; consulte Uso de trabajos web. Si necesita acceso DOM, use requestAnimationFrame.
Scripts basura que afectan a la respuesta o la animación.	La recolección de basura puede ocurrir en cualquier lugar.	Escribe menos guiones basura. Ver Recolección de basura en Animaciones en la lista de verificación de rendimiento en tiempo de ejecución de Paul Lewis.

Estilo

Los cambios de estilo son costosos, especialmente si afectan a más de un elemento del DOM. Cada vez que aplica estilos a un elemento, el explorador calcula el impacto en todos los elementos relacionados, recalcula el diseño y vuelve a pintar.

Estilo: Herramientas

Tome una grabación en la herramienta Rendimiento . Compruebe si hay eventos grandes Recalculate Style en la grabación (mostrados en púrpura).

Seleccione un Recalculate Style evento para ver más información sobre él en el panel Detalles . Si los cambios de estilo están tomando mucho tiempo, eso es un golpe de rendimiento. Si los cálculos de estilo afectan a un gran número de elementos, esa es otra área con margen de mejora.

Para reducir el impacto de Recalculate Style los eventos, minimice el uso de las propiedades CSS que activan layout, paint y composite. Estas propiedades tienen el mayor impacto en el rendimiento de representación. Para obtener más información, vea Evitar las propiedades que activan el diseño o paint en Cómo crear animaciones CSS de alto rendimiento, en web.dev.

Estilo: Problemas

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

Problema	Por ejemplo:	Solución
Costosos cálculos de estilo que afectan a la respuesta o la animación.	Cualquier propiedad CSS que cambie la geometría de un elemento, como el ancho, la altura o la posición; El explorador comprueba todos los demás elementos y vuelve a calcular el diseño.	Evite CSS que desencadena diseños.
Selectores complejos que afectan a la respuesta o la animación.	Los selectores anidados obligan al explorador a saberlo todo sobre todos los demás elementos, incluidos padres e hijos.	Haga referencia a un elemento del CSS con solo una clase.

Diseño

El diseño (o reflujo en Firefox) es el proceso mediante el cual el navegador 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, y así sucesivamente, en todo el árbol hacia arriba y hacia abajo. El proceso puede ser bastante complicado para el navegador.

Como regla general, si solicita un valor geométrico del DOM antes de que se complete un fotograma, se encontrará con "diseños sincrónicos forzados", que pueden ser un gran cuello de botella en el rendimiento si se repiten con frecuencia o se realizan 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 están marcados con barras rojas.

"Layout thrashing" 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 navegador a recalcular el diseño una y otra vez. Para identificar la alteración del diseño, busque un patrón de múltiples advertencias de diseño sincrónicas forzadas. Vea 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 la animación.	Forzar al explorador a realizar el diseño en una fase más temprana de la canalización de píxeles, lo que provoca que se repitan los pasos del proceso de renderizado.	Primero se preparan las lecturas de estilo y después se escriben.
Cambios en el diseño que afectan a la respuesta o la animación.	Un bucle que coloca al navegador en un ciclo de lectura-escritura-lectura-escritura, lo que obliga al navegador a recalcular el diseño una y otra vez.	Operaciones de lectura y escritura por lotes automáticamente mediante la biblioteca FastDom.

Pintura y compuestos

La pintura es el proceso de rellenar píxeles. A menudo es la parte más costosa del proceso de renderizado. Si notó que su página no funciona como se diseñó de ninguna manera, es probable que tenga problemas de pintura.

La composición es donde se juntan las partes pintadas de la página para mostrarlas en la pantalla. En su mayor parte, si se apega a las propiedades exclusivas del compositor y evita la pintura por completo, debería notar una mejora importante en el rendimiento, pero debe tener cuidado con el número excesivo de capas.

Pintura y composite: Herramientas

Para averiguar cuánto tiempo lleva pintar o con qué frecuencia se pinta:

1. En DevTools, en la herramienta Rendimiento, haga clic en el botón Configuración de captura ( y, a continuación, seleccione la casilla Habilitar instrumentación de representación avanzada.

2. Tome una grabación.

Si la mayor parte de su tiempo de renderizado se dedica a pintar, tiene problemas de pintura. Para obtener más información, consulte Habilitar instrumentación avanzada de Paint en Referencia de características derendimiento.

Pintura y composite: Problemas

La siguiente tabla describe algunos problemas comunes de pintura y compuestos y posibles soluciones.

Problema	Por ejemplo:	Solución
Tormentas de pintura que afectan a la respuesta o la animación.	Grandes áreas de pintura o pinturas costosas que afectan la respuesta o la animación.	Evite la pintura, promueva elementos que se muevan a su propia capa, use transformaciones y opacidad.
Explosiones de capas que afectan a las animaciones.	La sobrepromoción de demasiados elementos afecta translateZ(0) en gran medida al rendimiento de la animación.	Promueva 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á escrita por Kayce Basques y Meggin Kearney.

Este trabajo está bajo una licencia Creative Commons Attribution 4.0 International.