CSS animations under the hood

Slides da apresentação sobre composite layer, memória e boas práticas com animações.

Transcript

1. CSS Animations Under the hood Por Rafael Dantas
2. Quem sou eu? Front End Developer na QUANTO Co-organizador do Meetup do HTMLSP @raffaeldantass
3. Disclaimer Não é uma talk sobre animações e suas propriedades É uma talk sobre todo o ecossistema envolvido na renderização de animações, especialmente Composite e Implicit Composite
4. Parser DOM CSSOM Monta o layout Processo de Paint Processo de Composite Exibe o Resultado Pipeline do Browser
5. Como funciona o Composite
9. Como funciona o Composite Vamos animar a seção dois Além disso, vamos inserir um z-index nas duas seções
12. Como funciona o Composite Pra cada frame o navegador precisa recalcular toda a geometria da animação e isso é lento demais. Não seria mais eficiente pintar a animação separadamente do resto da página?
13. Como funciona o Composite Sim, e é exatamente aí que o composite entra. O navegador passa a responsabilidade para a GPU processando isso de forma separada. Mas para otimizar a animação o navegador precisa de três coisas:
14. Como funciona o Composite As propriedades CSS da animação não podem: Depender do fluxo dá página Causar um repaint Afetar o fluxo da página
15. Como funciona o Composite As propriedades top e left podem receber valores relativos que dependem do tamanho do elemento do pai As únicas propriedades que atendem as condições anteriores são transform e opacity
18. Como funciona o Composite Nossa animação está declarativa O navegador já sabe antes de executar a animação o que virá Com o processamento na GPU, a CPU fica livre
19. Como funciona o Composite Parece uma solução ótima, certo? O navegador precisa criar um payload para a GPU Parâmetros da animação Tamanho desse layer Posição do elemento Etc
20. Como funciona o Composite A transferência desse payload pode levar de 2 a 3 milissegundos Isso pode comprometer a nossa animação Nesse caso, é possível perder o ganho de performance
21. Como funciona o Composite Como ocorre o processo de transferência? Para cada composite layer é criada uma imagem Preparar as informações de cada layer Preparar os shaders para a animação (se for aplicável) Enviar para a GPU Então nós temos um problema É necessário animar tudo? Como a animação pode ser feita de modo menos “custoso"?
22. Implicit Composite Vamos inverter o elemento animado Ao invés da container__section-two, vamos animar a container__section-one
24. Implicit Composite Implicit composite força a criação de uma camada extra A container__section-two não está animada, mas o navegador cria uma camada extra, pois a container__section-two fica acima da container__section-one. Uma camada extra que cria um processo de repaint pesado
25. Implicit Composite 3D transforms <video>, <canvas> and <iframe> Position: fixed
26. Implicit Composite O principal problema não é o repaint. O principal problema é o consumo de memória
27. Implicit Composite A sua animação tem um custo computacional (consumo de memória e processamento de GPU) Quanto mais camadas criadas mais “imagens” são criadas pelo navegador O navegador precisa desenhar cada pixel na tela e isso tem um custo pra GPU que tem que processar toda a UI
28. Implicit Composite Vamos entender como o navegador calcula isso. Um exemplo simples, vamos imaginar 3 caixas com 200x200
29. Implicit Composite O navegador vai precisar desenhar a imagem criando um array de pixels E esse array de pixels tem um peso na memória 200 x 200 x 3 = 120.000 bytes O navegador multiplica a altura pela largura e depois multiplica por 3 O 3 representa o RGB, se contém áreas transparentes se multiplica por 4 (RGBa) 200 x 200 x 4 = 160.000 bytes 160.000 x 3 = 480.000 bytes
30. Implicit Composite Um outro exemplo, um carrossel com 5 imagens com tamanho de 400x400 pixels Vamos imaginar colocar uma transição suave entre as imagens utilizando transform: translateX 400 x 400 x 4 = 640.000 bytes 640.000 x 5 = 3.200.000 bytes 3.2Mb Agora imagine uma SPA com diversos efeitos animados, microinterações, imagens com alta resolução, etc
31. Implicit Composite Em um PC relativamente moderno isso talvez não seja um problema Em computadores mais antigos e smartphones intermediários isso pode se tornar um grande problema Boa parte destes dispositivos tem 1 ou 2gb de memória disponível Memória que é dividida com processos do sistema operacional, do próprio navegador, processos em background, entre outras coisas
32. O que fazer? Como otimizar? Os principais problemas são repaints pesados e consumo de memória Algumas estratégias podem ser adotadas para melhorar isso, mas vamos fazer alguns preparativos antes
33. Ferramentas auxiliares Vá na aba de flags do Chrome e ative o Developer tools experiments:
34. Depois abra o devtools e procure pelo icone: Ferramentas auxiliares
35. Ferramentas auxiliares
36. Otimizações possíveis Primeira delas, obviamente: Evite implicit composite Elementos como video, canvas, animar elementos fora da ordem do markup podem causar implicit composite Definir os elementos que serão animados com z-index, isso evita repaint. Use a propriedade will-change (com parcimônia)
37. Otimizações possíveis Reduza o tamanho do composite layer, como? Vamos imaginar um box vermelho:
39. Quais lições aprendemos? Sempre pense nos dispositivos menos potentes e na sua experiencia. O processo de paint/repaint é muito mais utilizado do que a gente imagina, o devtools é nosso amigo, use à vontade para metrificar tudo. (layers e repaint tabs) Se você precisa de mais do que transform e opacity pra fazer sua animação, repense ela
40. Recomendações Greensock e Animation API são opções viáveis Elas podem te ajudar e resolvem alguns problemas de processamento (mas não tudo) Entender o funcionamento do navegador facilita a arquitetura do projeto
41. Obrigado! @raffaeldantass