Evita las animaciones no compuestas

Published on

Translated to: English, Português, 한국어, 中文, Pусский, 日本語

Las animaciones no compuestas pueden parecer irregulares (es decir, no fluidas) en teléfonos de gama baja o cuando se ejecutan tareas de alto rendimiento en la línea principal. Las animaciones Janky pueden aumentar el cambio de diseño acumulativo (CLS) de su página. Reducir CLS mejorará su puntuación de rendimiento de Lighthouse.

Antecedentes

Los algoritmos del navegador para convertir HTML, CSS y JavaScript en píxeles se conocen colectivamente como canalización de renderizado.

The rendering pipeline consists of the following sequential steps: JavaScript, Style, Layout, Paint, Composite.
Canalización de renderizado.

Está bien si no comprendes lo que significa cada paso de la canalización de renderizado. La clave para entenderlo ahora es que en cada paso de la canalización de renderizado, el navegador usa el resultado de la operación anterior para crear nuevos datos. Por ejemplo, si tu código hace algo que activa Diseño, los pasos Pintura y Composición deben ejecutarse nuevamente. Una animación no compuesta es cualquier animación que activa uno de los pasos anteriores en la canalización de renderizado (Estilo, Diseño o Pintura). Las animaciones no compuestas funcionan peor porque obligan al navegador a trabajar más.

Consulta los siguientes recursos para obtener más información en detalle sobre la canalización de renderizado:

Cómo detecta Lighthouse las animaciones no compuestas

Cuando una animación no se puede componer, Chrome informa las razones de la falla al seguimiento de DevTools, que es lo que lee Lighthouse. Lighthouse enumera los nodos DOM que tienen animaciones que no fueron compuestas junto con los motivos de falla de cada animación.

Cómo asegurarse de que las animaciones estén compuestas

Consulta Adherirse a las propiedades exclusivas del compositor y administrar el número de capas y las animaciones de alto rendimiento .

Recursos

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.