O modo de pintura contínua para a criação de perfis de pintura já está disponível no Chrome Canary. Este artigo explica como identificar um problema no tempo de pintura da página e como usar essa nova ferramenta para detectar gargalos no desempenho da pintura.
Como investigar o tempo de pintura na sua página
Você notou que a página não rola suavemente. É assim que você começa a resolver o problema. Para nosso exemplo, vamos usar a página de demonstração Things We Left On The Moon (coisas que deixamos na Lua, em tradução livre) de Dan Cederholm.
Você abre o Web Inspector, inicia uma gravação de linha do tempo e rola a página para cima e para baixo. Em seguida, você analisa as linhas do tempo verticais, que mostram o que aconteceu em cada frame.
Se você notar que a maior parte do tempo é gasto na pintura (grandes barras verdes acima de 60 fps), é necessário analisar melhor o motivo disso. Para investigar suas pinturas, use a configuração Show paint rectangles do Web Inspector (ícone de engrenagem no canto inferior direito do Web Inspector). Isso vai mostrar as regiões em que o Chrome pinta.
O Chrome pode repintar áreas da página por vários motivos:
- Os nós do DOM são alterados no JavaScript, o que faz com que o Chrome recalcule o layout da página.
- As animações são reproduzidas e atualizadas em um ciclo baseado em frames.
- A interação do usuário, como passar o cursor, causa mudanças de estilo em determinados elementos.
- Qualquer outra operação que faça com que o layout da página mude.
Como desenvolvedor, você precisa estar ciente das repintagens que ocorrem na sua página.
Uma ótima maneira de fazer isso é observar os retângulos de pintura. Na captura de tela
de exemplo acima, é possível ver que toda a tela está coberta por um grande retângulo
de pintura. Isso significa que toda a tela é repintada à medida que você rola, o que não é
bom. Nesse caso específico, isso é causado pelo estilo CSS
background-attachment:fixed, que faz com que a imagem de plano de fundo da página
fique na mesma posição enquanto o conteúdo da página se move por cima dela à medida que
você rola a página.
Se você identificar que as repinturas cobrem uma área grande e/ou levam muito tempo, você terá duas opções:
- Tente mudar o layout da página para reduzir a quantidade de pintura. Se possível, o Chrome mostra a página visível apenas uma vez e adiciona partes que não estavam visíveis conforme você rola a tela para baixo. No entanto, há casos em que o Chrome precisa pintar novamente determinadas áreas. Por exemplo, a regra CSS
position:fixed, que geralmente é usada para elementos de navegação que permanecem na mesma posição, pode causar essas repintagens. - Se você quiser manter o layout da página, tente reduzir o custo da pintura das áreas que serão repintadas. Nem todos os estilos CSS têm o mesmo custo de pintura. Alguns têm pouco impacto, outros, muito. Descobrir os custos de pintura de determinados estilos pode ser trabalhoso. Para fazer isso, alterne os estilos no painel "Elementos" e observe a diferença na gravação da linha do tempo, ou seja, alterne entre os painéis e faça muitas gravações. É aí que entra o modo de pintura contínua.
Modo de pintura contínua
O modo de pintura contínua é uma ferramenta que ajuda a identificar quais elementos são caros na página. Ele coloca a página em um estado de pintura sempre, mostrando um contador de quanto trabalho de pintura está acontecendo. Em seguida, você pode ocultar elementos e transformar estilos, observando o contador para descobrir o que está lento.
Configuração
Para usar o modo de pintura contínua, você precisa usar o Chrome Canary.
Em sistemas Linux (e alguns Macs), é necessário garantir que o Chrome seja executado no
modo de composição. Isso pode ser ativado permanentemente usando a configuração Composição de GPU em todas as páginas em about:flags.
Como começar
O modo de pintura contínua pode ser ativado usando a caixa de seleção Ativar pintura contínua da página nas configurações do Web Inspector (ícone de engrenagem no canto inferior direito do Web Inspector).
A pequena tela no canto superior direito mostra os tempos de pintura medidos em milissegundos. Mais especificamente, ele mostra:
- O último tempo de paint medido à esquerda.
- Os valores mínimo e máximo do gráfico atual à direita.
- Um gráfico de barras que mostra o histórico dos últimos 80 frames na parte de baixo (a linha no gráfico indica 16 ms como ponto de referência).
As medições do tempo de pintura dependem da resolução da tela, do tamanho da janela e do hardware em que o Chrome está sendo executado. Essas coisas provavelmente serão diferentes para seus usuários.
Fluxo de trabalho
Confira como usar o modo de pintura contínua para rastrear elementos e estilos que aumentam muito o custo de pintura:
- Abra as configurações do Web Inspector e marque a opção Ativar a pintura contínua da página.
- Acesse o painel "Elements" e navegue pela árvore DOM com as teclas de seta ou selecionando elementos na página.
- Use o atalho do teclado H, um auxiliar recém-introduzido, para alternar a visibilidade de um elemento.
- Analise o gráfico de tempo de pintura e tente identificar um elemento que adiciona muito tempo de pintura.
- Analise os estilos CSS desse elemento, ativando e desativando enquanto observa o gráfico para encontrar o estilo que causa a lentidão.
- Mude esse estilo e faça outra gravação da linha do tempo para verificar se isso melhorou o desempenho da sua página.
A animação abaixo mostra a alternância de estilos e o efeito disso no tempo de pintura:
Este exemplo demonstra como desativar um dos estilos CSS box-shadow
ou border-radius reduz muito o tempo de pintura. O uso de box-shadow e border-radius em um elemento leva a operações de pintura
muito caras, porque o Chrome não pode otimizar isso. Portanto, se você tiver um elemento
que recebe muitas repintagens, como no exemplo, evite essa
combinação.
Observações
O modo de pintura contínua repinta toda a página visível. Isso geralmente não acontece ao navegar em uma página da Web. A rolagem geralmente pinta apenas as partes que não estavam visíveis antes. E para outras mudanças na página, apenas a menor área possível é repintada. Verifique com outra gravação da linha do tempo se as melhorias de estilo realmente tiveram um impacto nos tempos de pintura da página.
Ao usar continuous painting mode, você pode descobrir que, por exemplo, os estilos
CSS border-radius e box-shadow adicionam muito tempo de pintura. Não
desaconselhamos o uso desses recursos em geral. Eles são ótimos e estamos felizes
por finalmente estarmos aqui. Mas é importante saber quando e onde usá-las.
Evite usá-los em áreas com muitas repinturas e evite o uso excessivo deles
em geral.
Demonstração ao vivo
Clique abaixo para conferir uma demonstração em que Paul Irish usa a pintura contínua para identificar uma operação de pintura muito cara.