Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS animations under the hood

CSS animations under the hood

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

Rafael Dantas

June 08, 2019
Tweet

More Decks by Rafael Dantas

Other Decks in Technology

Transcript

  1. CSS Animations
    Under the hood
    Por Rafael Dantas

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  5. Como funciona o Composite

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. 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:

    View full-size slide

  9. 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

    View full-size slide

  10. 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

    View full-size slide

  11. 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

    View full-size slide

  12. 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

    View full-size slide

  13. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. 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

    View full-size slide

  17. Implicit Composite
    3D transforms
    , and
    Position: fixed

    View full-size slide

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

    View full-size slide

  19. 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

    View full-size slide

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

    View full-size slide

  21. 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

    View full-size slide

  22. 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

    View full-size slide

  23. 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

    View full-size slide

  24. 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

    View full-size slide

  25. Ferramentas auxiliares
    Vá na aba de flags do Chrome e ative o Developer tools experiments:

    View full-size slide

  26. Depois abra o devtools e procure pelo icone:
    Ferramentas auxiliares

    View full-size slide

  27. Ferramentas auxiliares

    View full-size slide

  28. 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)

    View full-size slide

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

    View full-size slide

  30. 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

    View full-size slide

  31. 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

    View full-size slide

  32. Obrigado!
    @raffaeldantass

    View full-size slide