A pintura é o processo de preencher pixels para que eventualmente sejam compostos telas. 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 do usuário telas. Muitas vezes, é a tarefa mais longa no e um que deve ser evitado, se possível.
Resumo
- A alteração de qualquer propriedade, com exceção de "Transforms" ou "Opacity", sempre aciona a pintura.
- A pintura geralmente é a parte mais cara do pipeline de pixels. evitá-lo sempre que possível.
- Reduza as áreas de pintura por meio da promoção de camadas e orquestração de animações.
- Usar o Paint Profiler do Chrome DevTools para avaliar a complexidade e o custo da pintura. reduzir sempre que possível.
Como acionar layout e pintura
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á 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. Abrir a guia "Renderização" e ative o Paint Flashing.
Com essa opção ativada, o Chrome fará a tela piscar na cor verde sempre que ocorrer uma pintura. Se você está vendo toda a tela piscar em verde ou áreas da tela que você acha que não deveriam ser pintadas, procure um pouco mais.
Promover elementos que se movem ou esmaecem
A pintura nem sempre é feita 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 que são repintados regularmente ou que se movem na tela com transformações podem ser tratados sem afetar outros elementos. É o mesmo que acontece com pacotes de arte como Sketch, GIMP ou Photoshop, em que camadas individuais podem ser manipuladas 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 funciona no Chrome, no Opera e no Firefox. Com um valor transform, cria uma nova camada do compositor:
.moving-element {
will-change: transform;
}
Para navegadores que não são compatíveis com 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 de maneira incorreta para forçar uma nova camada:
.moving-element {
transform: translateZ(0);
}
No entanto, é preciso ter cuidado para não criar muitas camadas, pois cada camada exige memória e gerenciamento. Saiba mais sobre isso na 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 dos 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, o que pode resultar na repintura da tela inteira. 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.
Reduzir áreas de pintura geralmente é um caso de orquestrar suas animações e transições para não se sobrepor tanto ou encontrar maneiras 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, 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.
O gerador de perfis de pintura acima permitirá que você determine se precisa procurar 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.
Evite a pintura durante animações específicas, 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.