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
Se você acionar o layout, sempre acionará a pintura, já que a mudança da geometria de qualquer elemento significa que os pixels precisam ser corrigidos.
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á assim:
Usar 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 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 que são repintados regularmente ou que se movem na tela com transformações podem ser tratados sem afetar 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 maneira de criar uma nova camada é usar a propriedade CSS will-change, disponível em todos os principais mecanismos de navegador 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 criar um perfil.
Reduzir áreas de pintura
Às vezes, no entanto, apesar da promoção dos elementos, o trabalho de pintura ainda é 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. Por exemplo, se você tiver um cabeçalho fixo na parte superior da página e algo estiver sendo pintado na parte inferior da tela, toda a tela pode acabar sendo 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.