Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
Os usuários esperam páginas interativas e suaves. Cada estágio no pipeline de pixels representa uma oportunidade para introduzir instabilidade (interrupções de renderização). Saiba mais sobre ferramentas e estratégias para identificar e corrigir problemas comuns que diminuem o desempenho do tempo de execução.
Resumo
Não escreva JavaScript que force o navegador a recalcular o layout. Separe as funções de leitura e gravação e execute as leituras primeiro.
Não complique demais seu CSS. Use menos CSS e mantenha seus seletores CSS simples.
Evite o layout o máximo possível. Escolha CSS que não acione o layout.
A pintura pode levar mais tempo do que qualquer outra atividade de renderização. Cuidado com os gargalos de tinta.
JavaScript
Cálculos de JavaScript, especialmente aqueles que disparam alterações visuais extensas, podem prejudicar o desempenho do aplicativo. Não deixe que o JavaScript mal cronometrado ou de longa execução interfira nas interações do usuário.
JavaScript: Ferramentas
Faça uma gravação na ferramenta Desempenho e procure por eventos suspeitosamente longos Evaluate Script .
Se você notar um pouco de instabilidade (interrupções de renderização) em seu JavaScript, talvez seja necessário levar sua análise para o próximo nível e coletar um perfil de CPU JavaScript. Os perfis de CPU mostram onde o tempo de execução é gasto nas funções da sua página. Saiba como criar perfis de CPU em Acelerar o tempo de execução do JavaScript (tipo de criação de perfil "Amostragem de alocação)".
JavaScript: Problemas
A seguir estão problemas comuns de JavaScript e possíveis soluções.
| Problema | Exemplo | Solução |
|---|---|---|
| Manipuladores de entrada caros que afetam a resposta ou a animação. | Toque, rolagem de paralaxe. | Deixe o navegador manipular o toque e as rolagens ou vincular o ouvinte o mais tarde possível. Consulte Manipuladores de entrada caros na lista de verificação de desempenho de tempo de execução de Paul Lewis. |
| JavaScript mal cronometrado afetando a resposta, a animação e o carregamento. | O usuário rola para a direita após o carregamento da página, setTimeout / setInterval. | Otimize o tempo de execução do JavaScript: use requestAnimationFrame, espalhe a manipulação do DOM entre quadros, use Web Workers; veja Usando Web Workers. |
| JavaScript de longa duração afetando a resposta. | O evento DOMContentLoaded é interrompido porque está sobrecarregado com o trabalho do JavaScript. | Mova o trabalho computacional puro para Web Workers; consulte Usando Web Workers. Se você precisar de acesso DOM, use requestAnimationFrame. |
| Scripts de lixo afetando a resposta ou a animação. | A coleta de lixo pode acontecer em qualquer lugar. | Escreva menos scripts de lixo. Consulte a coleta de lixo em animações na lista de verificação de desempenho de tempo de execução de Paul Lewis. |
Estilo
As alterações de estilo são caras, especialmente se essas alterações afetarem mais de um elemento no DOM. Sempre que você aplica estilos a um elemento, o navegador calcula o impacto em todos os elementos relacionados, recalcula o layout e repinta.
Estilo: Ferramentas
Faça uma gravação na ferramenta Desempenho . Verifique a gravação em busca de eventos grandes Recalculate Style (exibidos em roxo).
Selecione um Recalculate Style evento para exibir mais informações sobre ele no painel Detalhes . Se as alterações de estilo estiverem demorando muito, isso será um impacto no desempenho. Se os cálculos de estilo estão afetando um grande número de elementos, essa é outra área com espaço para melhorias.
Para reduzir o impacto dos Recalculate Style eventos, minimize o uso de propriedades CSS que acionam layout, pintura e composição. Essas propriedades têm o maior impacto no desempenho da renderização. Para obter mais informações, consulte Evitar propriedades que acionam o layout ou a pintura em Como criar animações CSS de alto desempenho, em web.dev.
Estilo: Problemas
A tabela a seguir descreve alguns problemas comuns de estilo e possíveis soluções.
| Problema | Exemplo | Solução |
|---|---|---|
| Cálculos de estilo caros que afetam a resposta ou a animação. | Qualquer propriedade CSS que altere a geometria de um elemento, como largura, altura ou posição; O navegador verifica todos os outros elementos e recalcula o layout. | Evite CSS que aciona layouts. |
| Seletores complexos que afetam a resposta ou a animação. | Seletores aninhados forçam o navegador a saber tudo sobre todos os outros elementos, incluindo pais e filhos. | Faça referência a um elemento em seu CSS com apenas uma classe. |
Layout
Layout (ou refluxo no Firefox) é o processo pelo qual o navegador calcula as posições e tamanhos de todos os elementos em uma página. O modelo de layout da web significa que um elemento pode afetar outros; Por exemplo, a largura do <body> elemento normalmente afeta as larguras de qualquer elemento filho e assim por diante, para cima e para baixo na árvore. O processo pode ser bastante complicado para o navegador.
Como regra geral, se você pedir um valor geométrico de volta do DOM antes que um quadro seja concluído, você se encontrará com "layouts síncronos forçados", que podem ser um grande gargalo de desempenho se repetidos com frequência ou executados para uma grande árvore DOM.
Layout: Ferramentas
O painel Desempenho identifica quando uma página causa layouts síncronos forçados. Esses Layout eventos são marcados com barras vermelhas.
"Layout thrashing" é uma repetição de condições de layout síncronas forçadas. Isso ocorre quando o JavaScript grava e lê do DOM repetidamente, o que força o navegador a recalcular o layout repetidamente. Para identificar a dificuldade de layout, procure um padrão de vários avisos de layout síncronos forçados. Veja a figura anterior.
Layout: 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 a resposta ou a animação. | Forçando o navegador a executar o layout anteriormente no pipeline de pixels, resultando na repetição de etapas no processo de renderização. | Agrupe suas leituras de estilo primeiro e, em seguida, faça todas as gravações. |
| Debate de layout afetando a resposta ou a animação. | Um loop que coloca o navegador em um ciclo de leitura-gravação-leitura-gravação, forçando o navegador a recalcular o layout repetidamente. | Operações de leitura e gravação em lote automaticamente usando a biblioteca FastDom. |
Tinta e compósito
Paint é o processo de preenchimento de pixels. Muitas vezes, é a parte mais cara do processo de renderização. Se você notou que sua página não está funcionando conforme projetado, é provável que você tenha problemas de pintura.
A composição é onde as partes pintadas da página são colocadas juntas para exibição na tela. Na maioria das vezes, se você se ater às propriedades apenas do compositor e evitar completamente a pintura, deverá notar uma grande melhora no desempenho, mas precisa estar atento à contagem excessiva de camadas.
Pintura e composição: Ferramentas
Para descobrir quanto tempo leva a pintura ou com que frequência a pintura ocorre:
No DevTools, na ferramenta Desempenho, clique no botão Configurações de Captura (
) e marque a caixa de seleção Habilitar instrumentação de renderização avançada.Faça uma gravação.
Se a maior parte do seu tempo de renderização for gasto pintando, você tem problemas de pintura. Para obter mais informações, consulte Ativar instrumentação de pintura avançada em Referência de recursos de desempenho.
Pintura e compósito: problemas
A tabela a seguir descreve alguns problemas comuns de tintas e compósitos e possíveis soluções.
| Problema | Exemplo | Solução |
|---|---|---|
| Tempestades de tinta afetando a resposta ou a animação. | Grandes áreas de pintura ou tintas caras afetando a resposta ou animação. | Evite tinta, promova elementos que estão se movendo para sua própria camada, use transformações e opacidade. |
| Explosões de camada que afetam as animações. | A promoção excessiva de muitos elementos afeta translateZ(0) muito o desempenho da animação. |
Promova para camadas com moderação e somente quando souber que oferece melhorias tangíveis. |
Observação
Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Pública Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é de autoria de Kayce Basques e Meggin Kearney.
Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.