O modo de pintura contínua para criação de perfil de pintura agora está disponível no Chrome Canary. Este artigo explica como identificar um problema no tempo de pintura de página e como usar essa nova ferramenta para detectar gargalos na performance da pintura.
Como investigar o tempo de pintura na sua página
Então você percebeu que sua página não rola bem. É assim que você começaria a resolver o problema. Vamos usar a página de demonstração Things We Left On The Moon, de Dan Cederholm, como nosso exemplo.
Abra o Web Inspector, inicie uma gravação da Timeline e role 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 na pintura (grandes barras verdes acima de 60 fps), é necessário analisar melhor por que isso está acontecendo. Para investigar as pinturas, use a configuração Show paintRectangles do Web Inspector (ícone de engrenagem no canto inferior direito do Web Inspector). Isso mostra as regiões em que o Chrome pinta o Chrome.
Existem motivos diferentes para o Chrome redesenhar á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.
- Animações em reprodução 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 dos retoques que ocorrem na sua página.
Olhar para os retângulos de tinta é uma ótima maneira de fazer isso. Na captura de tela
de exemplo acima, a tela inteira é coberta por um grande retângulo de
tinta. Isso significa que toda a tela é pintada novamente à 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 permaneça na mesma posição enquanto o conteúdo da página se move sobre ela conforme você rola a tela.
Se você identificar que as novas pinturas cobrem uma grande área e/ou demorarem muito, você terá 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 à medida que você rola a tela para baixo. No entanto, há casos em que o Chrome precisa pintar algumas áreas. Por exemplo, a regra CSS
position:fixed, que costuma ser 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, pode tentar reduzir o custo de pintura das áreas repintadas. Nem todo estilo CSS tem o mesmo custo de pintura, alguns têm pouco impacto, outros muito. Descobrir os custos de pintura de certos estilos pode ser muito trabalhoso. Você pode fazer isso alternando os 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 jogo.
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. Isso coloca a página em um estado sempre repintado, mostrando um contador da quantidade de trabalho de pintura. Em seguida, você pode ocultar elementos e modificar estilos, monitorando o contador, para descobrir o que está lento.
Instalação
Para usar o modo de pintura contínua, use 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 em about:flags.
Como começar
O modo de pintura contínua pode ser ativado pela 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 tela pequena no canto superior direito mostra os tempos de exibição medidos em milissegundos. Mais especificamente, ela mostra:
- O tempo da última exibição medida à esquerda.
- O mínimo e o máximo do gráfico atual à direita.
- Um gráfico de barras que mostra o histórico dos últimos 80 frames na parte inferior (a linha no gráfico indica 16 ms como um 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 repintura contínua da página.
- Acesse o painel "Elementos" e navegue pela árvore do DOM usando as teclas de seta ou escolhendo elementos na página.
- Use o atalho de teclado H, um assistente recém-apresentado, para alternar a visibilidade de um elemento.
- Olhe para o gráfico de tempo de pintura e tente identificar um elemento que aumente muito tempo de pintura.
- Analise os estilos CSS desse elemento, alternando entre ativados e desativados enquanto observa o gráfico, para encontrar o estilo que causa a lentidão.
- Altere esse 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 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 repinturas, como no exemplo, evite essa
combinação.
Observações
O modo de pintura contínua mostra novamente toda a página visível. Isso geralmente 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 é pintada novamente. Portanto, verifique em outra gravação da linha do tempo se as melhorias de estilo realmente afetaram os tempos de exibição 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
é desaconselhável usar esses recursos em geral. Eles são incríveis e estamos felizes
por finalmente estarem aqui. No entanto, é importante saber quando e onde usá-los.
Evite usá-las 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 Irlanda usa pintura contínua para identificar uma operação de tinta excepcionalmente cara.