Resumo: o Chromium está atualizando os recursos de aceleração de hardware automaticamente para animações SVG, transformações baseadas em porcentagem e, em breve, animações de cor de segundo plano e de caminho de clipe.
Quando se trata do desempenho da animação na Web, os termos "aceleração de hardware" e "aceleração por GPU" provavelmente serão mencionados. Mas o que isso significa? Estilos acelerados por hardware são aqueles que aproveitam a GPU (unidade de processamento gráfico) em vez da CPU (unidade central) para renderizar estilos visuais. Isso ocorre porque a GPU pode renderizar alterações visuais em uma página da Web mais rapidamente do que a CPU.
O uso da GPU para descarregar transições e animações com muitos gráficos significa visuais mais suaves e menos instabilidade, já que essas animações não são afetadas pela linha de execução principal. Ao retirá-las da linha de execução principal, as animações ignoram a quantidade de outros scripts ativos em execução na página, o que diminuiria a velocidade dos recursos visuais e criaria instabilidade.
Como ativar animações aceleradas por hardware
As animações aceleradas por hardware são compostas como camadas e ajudam os desenvolvedores a alcançar animações suaves de 60 QPS (quadros por segundo) para melhorar a performance da renderização visual. Atualmente, existem algumas maneiras de especificar e ativar animações e transições aceleradas por hardware na Web:
- Use funções
transformCSS ou faça a transição dos valoresopacityoufilter - Adicione a propriedade
will-changeao elemento. - Criar um desenho animado na tela usando o
OffscreenCanvas - Criar um desenho 3D do WebGL
opacity, filter e
transform por enquanto, background-color e clip-path vão fazer parte da lista em breve. O que mais está sendo acelerado por hardware por padrão no Chromium? Há algumas coisas que surgem pelo pipeline, incluindo animações SVG, algo que os desenvolvedores têm solicitado fortemente.
Animações SVG aceleradas por hardware
O SVG é um ótimo recurso para qualquer site, e agora essas interações com ele podem ser mais eficientes. A partir do Chromium 89, o Chrome e o Firefox serão semelhantes para ativar a aceleração de hardware por padrão nas animações SVG. O que você, desenvolvedor, precisa fazer? Nada. Isso será aplicado automaticamente para animações SVG no Chromium 89 e versões mais recentes.
Exemplo
Vamos analisar as diferenças entre uma animação SVG com e sem a aceleração de hardware ativada. Os indicadores de carregamento são elementos de interface usados com frequência, como este que aparece no facebook.com. Esses indicadores sugerem que o trabalho está sendo feito no servidor, enquanto o usuário aguarda uma resposta. No caso mostrado aqui, a resposta seria carregar resultados adicionais na barra lateral.
Quando abrimos o DevTools, podemos começar a criar perfis e realmente ver as diferenças entre uma experiência de animação com CPU e aceleração por GPU.
À esquerda, como o Chromium 87, a nova pintura ocorre sempre que o ícone de carregamento é animado, ou seja, continuamente. À direita, não há rede (Chromium 89 e Firefox). Podemos testar isso no painel de renderização do DevTools ao ativar o recurso de flash do Paint.
Olhando mais de perto no painel "Desempenho", é possível ver novamente esse efeito e como ele afeta o desempenho geral da sua propriedade da Web. Você evita completamente o tempo de renderização e pintura para a animação, o que significa animações mais suaves e aplicativos com melhor desempenho. O Facebook não enviará esse carregador baseado em SVG até que o suporte do navegador para SVG acelerado por hardware seja maior, mas isso permitiria mais flexibilidade em termos de aplicação de temas, escalonamento, requisitos de resolução e manutenção mais fácil.
Animações de porcentagem
A equipe de Interações também está oferecendo suporte a animações de transformação percentual no
Chromium 89. Animações baseadas em porcentagem descrevem interações que incluem movimentos
baseados em porcentagem. Por exemplo, é possível aumentar algo em 20% ou deslizar um menu responsivo de barra lateral
fora da tela usando algo como translateX: -100%.
Esses tipos de animação da interface são relativamente comuns, mas atualmente não aproveitam a aceleração de hardware porque anteriormente não era possível compor essas animações. As porcentagens em transformações dependem do tamanho da caixa (ou seja, layout). No entanto, agora, desde que o tamanho do layout não mude a cada frame, o navegador pode pré-calcular os valores de transformação absolutos e executá-los como se o desenvolvedor tivesse fornecido os valores de pixel. A boa notícia é que a equipe do Chromium está trabalhando nesse recurso e, em breve, esses tipos de animação serão compostos automaticamente e acelerados por hardware.
O que vem a seguir?
Essas animações atualizadas tornam o estilo da Web muito mais suave. E, como mencionado acima, a equipe está sempre
procurando para ver as futuras necessidades da Web. No momento, planejamos converter
background-color e clip-path para usar automaticamente a aceleração de hardware em versões futuras do
Chromium.
background-color é uma prioridade devido à alta contagem de
usos de transições e
efeitos, e clip-path permite efeitos de transição muito mais eficientes em toda a Web. Quando desempenho encontra interatividade, todos saem ganhando!
Imagem da capa: Siora Photography para Unsplash.