O modo de pintura contínua para 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 página
Você percebeu que a página não rola suavemente. É assim que você começaria a resolver o problema. Para este exemplo, usaremos a página de demonstração Things We Left On The Moon, de Dan Cederholm.
Você abre o Web Inspector, inicia uma gravação da linha do tempo e rola a página para cima e para baixo. Em seguida, você observa as linhas do tempo verticais, que mostram o que aconteceu em cada frame.
Se você perceber que a maior parte do tempo é gasto pintando (grandes barras verdes acima de 60 fps), você precisará analisar mais de perto por que isso está acontecendo. Para investigar suas tintas, use a configuração Show paint retângulos do Web Inspector (ícone de engrenagem no canto inferior direito do Web Inspector). Isso mostrará as regiões onde o Chrome pinta.
Há diferentes motivos para o Chrome repintar áreas da página:
- Os nós do DOM são alterados no JavaScript, o que faz com que o Chrome recalcule o layout da página.
- São exibidas animações que são 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 seja alterado.
Como desenvolvedor, você precisa estar ciente das novas pinturas que acontecem na sua página.
Uma ótima maneira de fazer isso é observar os retângulos de pintura. Na captura de tela
de exemplo acima, observe que a tela inteira está coberta por um grande retângulo
de pintura. Isso significa que a tela inteira é repintada à medida que você rola, o que não é
bom. Neste caso específico, isso é causado pelo estilo CSS background-attachment:fixed, que faz com que a imagem de plano de fundo da página permaneça na mesma posição enquanto o conteúdo da página se move por cima dela conforme você rola.
Se você acha que as repinturas cobrem uma grande área e/ou demoram muito, você tem duas opções:
- Você pode tentar mudar o layout da página para reduzir a quantidade de pintura. Se possível, o Chrome pinta a página visível apenas uma vez e adiciona partes que não estavam visíveis enquanto você rola para baixo. No entanto, há casos em que o Chrome precisa repintar certas áreas. Por exemplo, a regra CSS
position:fixed, que é frequentemente usada para elementos de navegação que permanecem na mesma posição, pode causar essas novas pinturas. - Se você quiser manter o layout da página, tente reduzir o custo de pintura das áreas que serão pintadas novamente. 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 certos estilos pode ser muito trabalhoso. É possível fazer isso alternando estilos no painel Elementos e observando a diferença na gravação da linha do tempo, o que significa alternar entre painéis e fazer muitas gravações. É aqui que o modo de pintura contínua entra em cena.
Modo de pintura contínua
O modo de pintura contínua é uma ferramenta que ajuda a identificar quais elementos estão caros na página. Ele coloca a página em um estado de repintura, mostrando um contador de quanto trabalho de pintura está acontecendo. Em seguida, você pode ocultar elementos e modificar estilos, observando o contador para descobrir o que está lento.
Configuração
Para usar o modo de pintura contínua, é necessário usar o Chrome Canary.
Em sistemas Linux (e alguns Macs), você precisa 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 no about:flags.
Como começar
O modo de pintura contínua pode ser ativado na caixa de seleção Ativar a repintura 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 tempo da última pintura medida à esquerda.
- Os valores mínimo e máximo do gráfico atual à direita.
- Um gráfico de barras mostrando o histórico dos últimos 80 frames na parte inferior (a linha do 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. Esteja ciente de que essas coisas provavelmente serão diferentes para seus usuários.
Fluxo de trabalho
É assim que você pode usar o modo de pintura contínua para rastrear elementos e estilos que aumentam o custo de pintura:
- Abra as configurações do Web Inspector e marque a opção Ativar a nova pintura contínua da página.
- Acesse o painel Elementos e percorra a árvore do DOM com as teclas de seta ou escolhendo elementos na página.
- Use o atalho de teclado H, um assistente recém-introduzido, para alternar a visibilidade em um elemento.
- Observe o gráfico de tempo de pintura e tente identificar um elemento que aumenta o tempo de pintura.
- Percorra os estilos CSS desse elemento, alternando-os entre eles enquanto olha o gráfico, para encontrar o estilo que causa a lentidão.
- Altere o estilo e faça outra gravação na 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 no tempo de pintura:
Este exemplo demonstra como desativar qualquer 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 para isso. Portanto, se você tiver um elemento
que recebe muitas repinturas, como no exemplo, evite essa
combinação.
Observações
O modo de pintura contínua redesenha toda a página visível. Geralmente, esse não é o caso 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 será repintada. Portanto, verifique com outra gravação da linha do tempo se as melhorias de estilo realmente tiveram 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 aumentam muito o tempo de pintura. Não é
recomendável usar esses recursos em geral, eles são incríveis e estamos felizes por
que finalmente estejam disponíveis. No entanto, é importante saber quando e onde usá-los.
Evite usá-los em áreas com muitas repinturas e evite o uso excessivo em geral.
Demonstração ao vivo
Clique abaixo para ver uma demonstração em que Paul Ireland usa a pintura contínua para identificar uma operação de pintura única e de alto custo.