CSS animations under the hood

Slide 1

Slide 1 text

CSS Animations Under the hood Por Rafael Dantas

Slide 2

Slide 2 text

Quem sou eu? Front End Developer na QUANTO Co-organizador do Meetup do HTMLSP @raffaeldantass

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Parser DOM CSSOM Monta o layout Processo de Paint Processo de Composite Exibe o Resultado Pipeline do Browser

Slide 5

Slide 5 text

Como funciona o Composite

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Como funciona o Composite Vamos animar a seção dois Além disso, vamos inserir um z-index nas duas seções

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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 eﬁciente pintar a animação separadamente do resto da página?

Slide 13

Slide 13 text

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:

Slide 14

Slide 14 text

Como funciona o Composite As propriedades CSS da animação não podem: Depender do ﬂuxo dá página Causar um repaint Afetar o ﬂuxo da página

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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 ﬁca livre

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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"?

Slide 22

Slide 22 text

Implicit Composite Vamos inverter o elemento animado Ao invés da container__section-two, vamos animar a container__section-one

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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 ﬁca acima da container__section-one. Uma camada extra que cria um processo de repaint pesado

Slide 25

Slide 25 text

Implicit Composite 3D transforms , and Position: fixed

Slide 26

Slide 26 text

Implicit Composite O principal problema não é o repaint. O principal problema é o consumo de memória

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Implicit Composite Vamos entender como o navegador calcula isso. Um exemplo simples, vamos imaginar 3 caixas com 200x200

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Ferramentas auxiliares Vá na aba de ﬂags do Chrome e ative o Developer tools experiments:

Slide 34

Slide 34 text

Depois abra o devtools e procure pelo icone: Ferramentas auxiliares

Slide 35

Slide 35 text

Ferramentas auxiliares

Slide 36

Slide 36 text

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 Deﬁnir os elementos que serão animados com z-index, isso evita repaint. Use a propriedade will-change (com parcimônia)

Slide 37

Slide 37 text

Otimizações possíveis Reduza o tamanho do composite layer, como? Vamos imaginar um box vermelho:

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

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 metriﬁcar tudo. (layers e repaint tabs) Se você precisa de mais do que transform e opacity pra fazer sua animação, repense ela

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Obrigado! @raffaeldantass