A pintura é o processo de preencher pixels para posterior composição na tela do usuário. Muitas vezes, é a tarefa mais longa do funil, e deve ser evitada, se possível.
Resumo
- Com a exceção de "transforms" ou "opacity", a alteração de qualquer propriedade sempre aciona a pintura.
- A pintura é, geralmente, a parte mais cara do pipeline de pixels. Evite isso sempre que possível.
- Reduza as áreas de pintura com a promoção de camadas e orquestração de animações.
- Use o gerador de perfis de pintura do Chrome DevTools para avaliar a complexidade e o custo da pintura. Reduza-os sempre que possível.
Como o layout e a pintura são acionados
O acionamento do layout sempre aciona a coloração, porque a mudança da geometria de qualquer elemento implica na correção dos pixels.
Você também poderá acionar a coloração se alterar 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á da seguinte forma:
Use o Chrome DevTools para identificar rapidamente os gargalos de coloração
Você pode usar o Chrome DevTools para identificar rapidamente as áreas que estão sendo pintadas. Abra a guia "Rendering" e ative a opção Paint Flashing.
Com essa opção ativada, o Chrome piscará a tela na cor verde sempre que ocorrer uma coloração. Caso a cor verde pisque em toda a tela ou em áreas da tela que não deveriam ser pintadas, investigue um pouco mais.
Promova elementos que se movem ou esmaecem
A coloração nem sempre é executada em uma única imagem na memória. Na verdade, é possível que o navegador pinte em várias imagens ou camadas do compositor, se necessário.
O benefício dessa abordagem é que elementos repintados regularmente ou que se movem na tela com transforms podem ser tratados sem afetar os outros elementos. É o mesmo processo de pacotes de arte como Sketch, GIMP ou Photoshop, onde camadas individuais podem ser tratadas e compostas uma em cima da outra para criar a imagem final.
A melhor forma de criar uma nova camada é usar a propriedade CSS will-change, que está disponível em todos os principais mecanismos de navegadores modernos. Usando um valor de transform, will-change vai criar uma nova camada do compositor:
.moving-element {
will-change: transform;
}
No entanto, tome cuidado para não criar muitas camadas, pois cada uma delas 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 essa mudança melhorou o desempenho. Não promova elementos sem gerar um perfil.
Reduzir áreas de pintura
No entanto, algumas vezes, mesmo com a promoção elementos, o trabalho de coloração continuará sendo necessário. Um grande desafio dos problemas de coloração é que os navegadores reúnem duas áreas que precisam de coloração, o que pode resultar na recoloração de toda a tela. Portanto, se houver um cabeçalho fixo na parte superior da página e algo estiver sendo pintado na parte inferior da página, toda a tela poderá ser repintada.
A redução das áreas de coloração é geralmente uma questão de coordenar animações e transições para não se sobreponham demais ou encontrar formas de evitar a animação de determinadas partes da página.
Simplificar a complexidade da pintura
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, por exemplo, 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.
Como mostrado na captura de tela anterior, o gerador de perfis de coloração permite determinar se você precisa procurar outras formas de conseguir efeitos. Verifique se é possível usar um conjunto de estilos ou meios alternativos mais baratos para conseguir o mesmo resultado final.
Sempre que possível, evite colorações durante determinadas animações, pois os 10 ms disponíveis por frame normalmente não são longos o suficiente para finalizar a pintura, especialmente em dispositivos móveis.