Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

Analisar o desempenho em tempo de execução

Os usuários esperam que as páginas sejam interativas e suaves. Cada etapa no funil de pixels representa uma oportunidade para introduzir instabilidade. Conheça ferramentas e estratégias para identificar e consertar problemas comuns que prejudicam o desempenho em tempo de execução.

TL;DR

  • Não escreva JavaScript que force o navegador a recalcular o layout. Separe funções de leitura e de gravação e realize as leituras primeiro.
  • Não complique o CSS além do necessário. Use menos CSS e mantenha os seletores de CSS simples.
  • Evite o layout o quanto puder. Escolha CSS que não acione nenhum layout.
  • A pintura pode levar mais tempo do que qualquer outra atividade de renderização. Cuidado com os gargalos de pintura.

JavaScript

Cálculos de JavaScript, especialmente os que acionam grandes mudanças visuais, podem paralisar a execução do aplicativo. Não deixe que JavaScript grande ou em momento inoportuno interfira nas interações do usuário.

Ferramentas

Faça uma gravação na Timeline e busque eventos Evaluate Script anormalmente longos. Se encontrar um desses eventos, você poderá ativar o Criador de perfis JS e refazer a gravação para obter informações mais detalhadas sobre exatamente quais funções do JS foram chamadas e quanto demorou cada chamada.

Se você notar muita instabilidade no JavaScript, poderá ser necessária uma análise mais detalhada com a coleta de um perfil de CPU do JavaScript. Os perfis de CPU mostram onde o tempo de execução é gasto nas funções da página. Saiba como criar perfis de CPU em Acelerar a execução do JavaScript.

Problemas

A tabela a seguir descreve alguns problemas comuns de JavaScript e possíveis soluções:

Problema Exemplo Solução
Gerenciadores de entrada pesados afetando resposta ou animação. Toque, rolagem com paralaxe. Deixe o navegador processar toques e rolagens ou vincule o detector o mais tarde possível (consulte Gerenciadores de entrada pesados na lista de verificação de desempenho em tempo de execução de Paul Lewis).
JavaScript em momento inoportuno afetando resposta, animação e carregamento. Rolagens do usuário logo após carregamento da página, setTimeout/setInterval. Otimize a execução do JavaScript: use requestAnimationFrame, distribua a manipulação de DOM pelos quadros e use web workers.
JavaScript grande afetando a resposta. O evento DOMContentLoaded para quando é sobrecarregado com trabalho do JS. Mova o trabalho computacional puro para os web workers. Se precisar de acesso ao DOM, use requestAnimationFrame (consulte também Otimizar a execução do JavaScript).
Scripts candidatos a lixo afetando resposta ou animação. A coleta de lixo pode acontecer em qualquer local. Escreva menos scripts candidatos a lixo (consulte Coleta de lixo em animação na lista de verificação de desempenho em tempo de execução de Paul Lewis).

Estilo

As mudanças de estilo são pesadas, especialmente se afetarem mais de um elemento do DOM. Sempre que estilos são aplicados a um elemento, o navegador precisa descobrir o impacto em todos os elementos relacionados, recalcular o layout e pintar novamente.

Guias relacionados:

Ferramentas

Faça uma gravação de Timeline. Verifique a existência de grandes eventos Recalculate Style (exibidos em roxo) na gravação.

Clique em um evento Recalculate Style para ver mais informações sobre ele no painel Details. Se das mudanças de estilo demorarem muito, trata-se de um problema de desempenho. Se os cálculos de estilo estiverem afetando muitos elementos, essa é outra área que pode ser melhorada.

Recálculo de estilo demorado

Para reduzir o impacto de eventos Recalculate Style:

Problemas

A tabela a seguir descreve alguns problemas comuns de estilo e possíveis soluções:

Problema Exemplo Solução
Cálculos de estilo pesados afetando resposta ou animação. Qualquer propriedade CSS que altera a geometria de um elemento, como largura, altura ou posição, força o navegador a verificar todos os outros elementos e refazer o layout. Evite CSS que aciona layouts.
Seletores complexos afetando resposta ou animação. Os seletores aninhados forçam o navegador a saber tudo sobre todos os outros elementos, incluindo pais e filhos. Referencie um elemento no CSS com apenas uma classe.

Guias relacionados:

Layout

Layout (ou reflow, no Firefox) é o processo pelo qual o navegador calcula a posição e o tamanho de todos os elementos de uma página. O modelo de layout da web indica que um elemento pode afetar outros. Por exemplo, a largura do elemento <body> normalmente afeta o comprimento de seus inferiores, e assim por diante, em toda a extensão da árvore. Esse processo pode ser bastante pesado para o navegador.

Como regra geral, se solicitar o retorno de um valor geométrico pelo DOM antes da conclusão de um quadro, você enfrentará "layouts síncronos forçados", que poderão ser um grande gargalo de desempenho quando repetidos com frequência ou executados para uma árvore do DOM grande.

Guias relacionados:

Ferramentas

A Timeline do Chrome DevTools identifica quando uma página gera layouts síncronos forçados. Esses eventos de Layout são marcados com barras vermelhas.

layout síncrono forçado

A "troca frequente de layouts" é uma repetição das condições de layout síncrono forçado. Isto ocorre quando JavaScript grava e lê do DOM repetidamente, o que força o navegador a recalcular o layout diversas vezes. Para identificar a troca frequente de layouts, busque um padrão de vários avisos de layout síncrono forçado (como na captura de tela acima).

Problemas

A tabela a seguir descreve alguns problemas comuns de layout e possíveis soluções:

Problema Exemplo Solução
Layout síncrono forçado afetando resposta ou animação. Forçar o navegador a executar o layout mais cedo no pipeline de pixels, resultando em etapas repetidas no processo de renderização. Agrupe as leituras de estilo primeiro e depois execute as gravações (consulte também Evite layouts grandes e complexos e a troca frequente de layouts).
Troca frequente de layouts afetando resposta ou animação. Um loop que coloca o navegador em um ciclo de leitura-gravação-leitura-gravação, forçando o recálculo do layout pelo navegador repetidas vezes. Agrupe automaticamente operações de leitura-gravação usando a biblioteca FastDom.

Pintar e compor

A pintura é o processo de preencher os pixels. É, muitas vezes, a parte mais pesada do processo de renderização. Se você notou que uma página apresenta alguma forma de instabilidade, é provável que haja problemas de pintura.

A composição é o agrupamento das partes pintadas da página para exibição na tela. Na maior parte das vezes, se usar apenas propriedades do compositor e evitar totalmente a pintura, você perceberá provavelmente uma grande melhoria de desempenho. No entanto, é preciso ter cuidado com o número excessivo de camadas (consulte também Usar somente propriedades do compositor e gerenciar o número de camadas).

Ferramentas

Você quer saber qual o tempo necessário para a pintura, ou com que frequência ela ocorre? Ative o Criador de perfil de pintura no painel Timeline e faça uma gravação. Se a maior parte do tempo de renderização for dedicado à pintura, você está com problemas de pintura.

Pinturas demoradas na gravação da timeline

Confira o menu de configurações de renderização para configurações adicionais que podem ajudar a diagnosticar problemas de pintura.

Problemas

A tabela a seguir descreve alguns problemas comuns de pintura e composição e possíveis soluções:

Problema Exemplo Solução
Repetições de pintura afetando resposta ou animação. Grandes áreas de pintura ou pinturas pesadas afetando resposta ou animação. Evite a pintura, promova elementos que se movem para uma camada própria e use transformações e opacidade (consulte Simplificar a complexidade da pintura e reduzir as áreas de pintura).
Explosões de camada afetando animações. Promoção excessiva de elementos demais com translateZ(0) gera grande impacto no desempenho da animação. Promova para camadas com moderação e somente quando souber que isso produzirá melhorias tangíveis (consulte Usar somente propriedades do compositor e gerenciar o número de camadas).