Resolver problemas de desempenho comuns
Os utilizadores esperam páginas interativas e suaves. Cada fase no pipeline de píxeis representa uma oportunidade para introduzir jank (interrupções de composição). Saiba mais sobre ferramentas e estratégias para identificar e corrigir problemas comuns que reduzem o desempenho do runtime.
Resumo
Não escreva JavaScript que force o browser a recalcular o esquema. Separe as funções de leitura e escrita e execute primeiro as leituras.
Não complique demasiado o seu CSS. Utilize menos CSS e mantenha os seletores CSS simples.
Evite o esquema o máximo possível. Selecione CSS que não acione de todo o esquema.
A pintura pode demorar mais tempo do que qualquer outra atividade de composição. Cuidado com estrangulamentos de tinta.
JavaScript
Os cálculos de JavaScript, especialmente os que acionam alterações visuais extensas, podem impedir o desempenho da aplicação. Não deixe que o JavaScript muito cronometrado ou de execução prolongada interfira com as interações do utilizador.
JavaScript: Ferramentas
Faça uma gravação na Ferramenta de desempenho e procure eventos suspeitos longos Evaluate Script .
Se notar um pouco de jank (interrupções de composição) no seu JavaScript, poderá ter de levar a sua análise para o nível seguinte e recolher um perfil de CPU JavaScript. Os perfis da CPU mostram onde o runtime é gasto nas funções da sua página. Saiba como criar perfis de CPU em Acelerar o runtime javaScript (tipo de criação de perfis "Amostragem de alocação").
JavaScript: Problemas
A tabela seguinte descreve alguns problemas comuns do JavaScript e potenciais soluções.
| Problema | Exemplo | Solução |
|---|---|---|
| Processadores de entrada dispendiosos que afetam a resposta ou animação. | Deslocamento tátil e parallax. | Permita que o browser processe o toque e os deslocamentos ou vinculte o serviço de escuta o mais tarde possível. Veja Expensive Input Handlers na lista de verificação de desempenho do runtime de Paul Lewis. |
| JavaScript com tempo incorreto que afeta a resposta, animação, carregamento. | O utilizador desloca-se logo após o carregamento da página, setTimeout/setInterval. | Optimize JavaScript runtime: use requestAnimationFrame, spread DOM manipulation over frames, use Web Workers. |
| JavaScript de execução prolongada que afeta a resposta. | O evento DOMContentLoaded para à medida que está inundado de trabalhos JS. | Mova trabalhos computacionais puros para Web Workers. Se precisar de acesso DOM, utilize requestAnimationFrame. |
| Scripts de lixo que afetam a resposta ou animação. | A libertação da memória pode acontecer em qualquer lugar. | Escreva menos scripts de lixo. Veja Libertação da Memória em Animação na lista de verificação de desempenho do runtime de Paul Lewis. |
Estilo
As alterações de estilo são dispendiosas, especialmente se essas alterações afetarem mais do que um elemento no DOM. Sempre que aplicar estilos a um elemento, o browser calcula o impacto em todos os elementos relacionados, recalcula o esquema e repaints.
Estilo: Ferramentas
Faça uma gravação na ferramenta Desempenho . Verifique se existem eventos grandes Recalculate Style na gravação (apresentados em roxo).
Selecione um Recalculate Style evento para ver mais informações sobre o mesmo no painel Detalhes . Se as alterações de estilo estiverem a demorar muito tempo, isso é um sucesso de desempenho. Se os cálculos de estilo estiverem a afetar um grande número de elementos, essa é outra área com espaço para melhorias.
Para reduzir o impacto dos Recalculate Style eventos, minimize a utilização de propriedades CSS que acionam o esquema, o paint e o composto. Estas propriedades têm o maior impacto na composição do desempenho. Para obter mais informações, veja Manter as Propriedades do Compositor-Only e Gerir a Contagem de Camadas
Estilo: Problemas
A tabela seguinte descreve alguns problemas de estilo comuns e potenciais soluções.
| Problema | Exemplo | Solução |
|---|---|---|
| Cálculos de estilo dispendiosos que afetam a resposta ou animação. | Qualquer propriedade CSS que altere a geometria de um elemento, como a largura, altura ou posição; o browser verifica todos os outros elementos e recalcula o esquema. | Evitar CSS que aciona esquemas |
| Seletores complexos que afetam a resposta ou animação. | Os seletores aninhados forçam o browser a saber tudo sobre todos os outros elementos, incluindo pais e crianças. | Referencie um elemento no CSS com apenas uma classe. |
Layout
Esquema (ou ajuste no Firefox) é o processo pelo qual o browser calcula as posições e tamanhos de todos os elementos numa página. O modelo de esquema da Web significa que um elemento pode afetar outros; por exemplo, a largura do <body> elemento normalmente afeta a largura de quaisquer elementos subordinados e assim sucessivamente, até à árvore. O processo pode estar bastante envolvido no browser.
Regra geral, se pedir um valor geométrico de volta do DOM antes de uma moldura ser concluída, vai encontrar-se com "esquemas síncronos forçados", o que pode ser um grande estrangulamento de desempenho se for repetidamente realizado para uma árvore DOM grande.
Esquema: Ferramentas
O painel Desempenho identifica quando uma página causa esquemas síncronos forçados. Estes Layout eventos são marcados com barras vermelhas.
"Eliminação de esquemas" é uma repetição de condições de esquema síncrona forçadas. Isto ocorre quando o JavaScript escreve e lê a partir do DOM repetidamente, o que força o browser a recalcular o esquema repetidamente. Para identificar a eliminação de esquemas, procure um padrão de vários avisos de esquema síncronos forçados. Veja a figura anterior.
Esquema: Problemas
A tabela seguinte descreve alguns problemas de esquema comuns e potenciais soluções.
| Problema | Exemplo | Solução |
|---|---|---|
| Esquema síncrono forçado que afeta a resposta ou a animação. | Forçar o browser a executar o esquema anteriormente no pipeline de píxeis, resultando em passos de repetição no processo de composição. | Crie o batch das leituras do seu estilo primeiro e, em seguida, efetue quaisquer escritas. |
| O esquema está a afetar a resposta ou a animação. | Um ciclo que coloca o browser num ciclo de leitura-escrita-leitura-escrita, forçando o browser a recalcular o esquema repetidamente. | Crie automaticamente operações de leitura/escrita em lotes com a biblioteca FastDom. |
Paint e composto
Paint é o processo de preenchimento de píxeis. Muitas vezes, é a parte mais dispendiosa do processo de composição. Se reparou que a sua página não está a funcionar como concebida, é provável que tenha problemas de pintura.
Composicionar é onde as partes pintadas da página são montadas para serem apresentadas no ecrã. Na maior parte das vezes, se se cingir a propriedades apenas de compositor e evitar pintar completamente, deve notar uma grande melhoria no desempenho, mas precisa de watch para contagens excessivas de camadas.
Paint e composto: Ferramentas
Para saber quanto tempo demora a pintura ou com que frequência ocorre a pintura:
Em DevTools, na ferramenta Desempenho , clique no botão Definições de captura (
) e, em seguida, selecione a caixa de verificação Ativar instrumentação de composição avançada .Faça uma gravação.
Se a maior parte do tempo de composição for passado a pintar, tem problemas de pintura. Para obter mais informações, veja Ativar a instrumentação de composição avançada na referência de Funcionalidades de desempenho.
Paint e composto: Problemas
A tabela seguinte descreve alguns problemas comuns de pintura e compostos e potenciais soluções.
| Problema | Exemplo | Solução |
|---|---|---|
| Tempestades de tinta que afetam a resposta ou animação. | Áreas de pintura grandes ou tintas caras que afetam a resposta ou animação. | Evite pintar, promova elementos que se movem para a sua própria camada, utilize transformações e opacidade. |
| Explosões de camadas que afetam animações. | A sobrepromotion de demasiados elementos com translateZ(0) afeta significativamente o desempenho da animação. |
Promova a camadas com moderação e apenas 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 encontra-se aqui e é criada por Kayce Bascos (Technical Writer, Chrome DevTools & Lighthouse) e Meggin Kearney (Technical Writer).
Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.