Skip to content
Aprender Medir Blog Case studies About
En esta página
  • Antecedentes
  • Cómo detecta Lighthouse las animaciones no compuestas
  • Cómo asegurarse de que las animaciones estén compuestas
  • Recursos

Evita las animaciones no compuestas

Aug 12, 2020
Available in: 日本語, 한국어, Português, Русский, 中文, English
Appears in: Auditorías de rendimiento
En esta página
  • Antecedentes
  • Cómo detecta Lighthouse las animaciones no compuestas
  • Cómo asegurarse de que las animaciones estén compuestas
  • Recursos

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:

  • Una mirada al interior de los navegadores web modernos (parte 3)
  • Simplifica la complejidad de la pintura y reduce sus áreas
  • Limítate a las propiedades del compositor y gestiona el número de capas

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 #

  • Código fuente para la auditoría de Evitar animaciones no compuestas
  • Limítate a las propiedades exclusivas del compositor y gestiona el número de capas
  • Animaciones de alto rendimiento
  • Simplifica la complejidad de la pintura y reduce sus áreas
  • Una mirada al interior de los navegadores web modernos (parte 3)
Última actualización: Aug 12, 2020 — Mejorar el artículo
Return to all articles
Compartir
suscribir

Contribute

  • Presentar un error
  • Ver fuente

Contenido relevante

  • developer.chrome.com
  • Chrome Actualizaciones
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos los productos
  • Condiciones y privacidad
  • Principios de la Comunidad

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.