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 puder.
- Reduza as áreas de pintura por meio da 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 pode acionar a pintura se mudar propriedades não geométricas, como planos de fundo, cor do 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. Abrir a guia "Renderização" e ative 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.
Promover elementos que se movem ou esmaecem
A coloração nem sempre é executada em uma única imagem na memória. Na verdade, o navegador pode usar várias imagens ou camadas de 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 criará uma nova camada do compositor:
.moving-element {
will-change: transform;
}
No entanto, é preciso ter cuidado para não criar muitas camadas, pois cada camada 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 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 pintura é que os navegadores unem duas áreas que precisam de pintura, e isso pode resultar na repintura 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, qualquer coisa que envolva 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.
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.