Simplificar a complexidade da pintura e reduzir as áreas de pintura

A pintura é o processo de preencher pixels para posterior composição nas telas dos usuários. Muitas vezes, é a tarefa mais longa do pipeline e deve ser evitada, se possível.

A pintura é o processo de preencher pixels para posterior composição nas telas dos usuários. Muitas vezes, é a mais longa de todas as tarefas no pipeline e deve ser evitada, se possível.

Resumo

  • Além de "transforms" ou "opaity", a alteração de qualquer propriedade sempre aciona a pintura.
  • A pintura é geralmente a parte mais cara do pipeline de pixels. Evite-a sempre que possível.
  • Reduza as áreas de pintura com promoção de camadas e orquestração de animações.
  • Use o criador de perfil de pintura do Chrome DevTools para avaliar a complexidade e o custo da pintura. Reduza sempre que possível.

Acionamento de layout e pintura

Se você acionar o layout, sempre acionará a pintura, já que alterar a geometria de qualquer elemento significa que os pixels precisam ser corrigidos.

O pipeline de pixels completo.

Também é possível acionar a pintura se você mudar propriedades não geométricas, como planos de fundo, cor de texto ou sombras. Nesses casos, o layout não será necessário, e o pipeline ficará assim:

O pipeline de pixels sem layout.

Use o Chrome DevTools para identificar rapidamente gargalos de pintura

Use o Chrome DevTools para identificar rapidamente as áreas que estão sendo pintadas. Abra a guia "Renderização" e ative a opção Paint Flashing.

Com essa opção ativada, o Chrome vai piscar a tela na cor verde sempre que ocorrer uma pintura. Se a tela inteira estiver verde piscando ou áreas da tela que você acha que não deveriam ser pintadas, é melhor se aprofundar um pouco mais.

A página pisca em verde sempre que ocorre uma pintura.

Promova elementos que se movem ou esmaecem

A pintura nem sempre é feita em uma única imagem na memória. Na verdade, o navegador pode pintar em várias imagens ou camadas de composição, se necessário.

Uma representação das camadas do compositor.

O benefício dessa abordagem é que os elementos repintados regularmente ou que estão se movendo na tela com transformações podem ser tratados sem afetar os outros. O mesmo acontece com pacotes de arte como Sketch, GIMP ou Photoshop, em que camadas individuais podem ser tratadas e compostas umas sobre as outras para criar a imagem final.

A melhor maneira de criar uma nova camada é usar a propriedade CSS will-change. Isso funcionará no Chrome, no Opera e no Firefox e, com um valor transform, criará uma nova camada do compositor:

.moving-element {
  will-change: transform;
}

Para navegadores que não oferecem suporte a will-change, mas que se beneficiam da criação de camadas, como o Safari e o Mobile Safari, é necessário usar uma transformação 3D para forçar uma nova camada:

.moving-element {
  transform: translateZ(0);
}

No entanto, tenha cuidado para não criar muitas camadas, pois cada uma exige memória e gerenciamento. Para mais informações, consulte a seção Usar somente propriedades do compositor e gerenciar o número de camadas.

Se você promoveu um elemento para uma nova camada, use o DevTools para confirmar se isso melhorou o desempenho. Não promova elementos sem criar um perfil.

Reduzir áreas de pintura

Às vezes, no entanto, apesar da promoção de elementos, o trabalho de pintura ainda é necessário. Um grande desafio dos problemas de pintura é que os navegadores unem duas áreas que precisam de pintura, e isso pode resultar na repintura de toda a tela. Assim, por exemplo, se você tiver um cabeçalho fixo na parte superior da página e algo estiver pintado na parte inferior da tela, a tela inteira pode acabar sendo repintada.

Reduzir as áreas de pintura geralmente é um caso de orquestrar as animações e transições para que não se sobreponham tanto ou encontrar maneiras de evitar a animação de determinadas partes da página.

Simplificar a complexidade da pintura

O tempo necessário para pintar parte da tela.

Quando se trata de pintura, algumas coisas são mais caras do que outras. Por exemplo, tudo que envolve um desfoque (como uma sombra) levará mais tempo para pintar do que, digamos, desenhar uma caixa vermelha. No entanto, em termos de CSS, isso nem sempre é óbvio: background: red; e box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); não aparentam ter características de desempenho muito diferentes, mas têm.

O gerador de perfis de pintura acima permite determinar se é necessário analisar outras maneiras de obter efeitos. Pergunte a si mesmo se é possível usar um conjunto mais barato de estilos ou meios alternativos para chegar ao seu resultado final.

Sempre evite pintar durante as animações em particular, já que os 10 ms que você tem por frame normalmente não são longos o suficiente para a pintura, especialmente em dispositivos móveis.