Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Diagnosticar layouts síncronos forçados

Saiba como usar o DevTools para Diagnosticar layouts síncronos forçados.

Neste guia, você aprenderá a depurar layouts síncronos forçados identificando e corrigindo problemas em uma demonstração ao vivo. A demonstração anima imagens usando requestAnimationFrame(), que é a abordagem recomendada para animação com base em quadros. No entanto, há uma quantidade considerável de instabilidade na animação. O seu objetivo é identificar a causa da instabilidade e corrigir o problema para que a demonstração execute suavemente a 60 FPS.

Coletar dados

Em primeiro lugar, é necessário capturar dados para que você possa entender exatamente o que acontece durante a execução da página.

  1. Abra a demonstração.
  2. Abra o painel Timeline do DevTools.
  3. Ative a opção JS Profile. Ao analisar o diagrama de chamas mais tarde, esta opção permitirá ver exatamente que funções foram chamadas.
  4. Clique em Start na página para iniciar a animação.
  5. Clique no botão Record no painel Timeline para iniciar a gravação na Timeline.
  6. Aguarde por dois segundos.
  7. Clique no botão Record novamente para parar a gravação.

Após o término da gravação, o painel Timeline deverá exibir algo parecido com a tela a seguir.

gravação de demonstração instável com a timeline

Identificar o problema

Agora que você já tem os dados, é hora de começar a entendê-los.

Imediatamente, você poderá ver no painel Summary da gravação na Timeline que o navegador gastou a maior parte do tempo renderizando. De modo geral, se for possível otimizar as operações de layout da página, você poderá reduzir o tempo da renderização.

Resumo da Timeline

Agora, examine as barras rosa logo abaixo do painel Overview. Elas representam quadros. Passe o cursor sobre elas para ver mais informações sobre o quadro.

quadro longo

Os quadros estão demorando muito para concluir. Para obter animações suaves, você precisa visar 60 FPS.

Agora é hora de diagnosticar exatamente o que está errado. Use o mouse para aumentar o zoom em uma pilha de chamada.

gravação da timeline com o zoom aumentado

A parte superior da pilha é um evento Animation Frame Fired. A função que você passou a requestAnimationFrame() é chamada sempre que este evento é ativado. Abaixo de Animation Frame Fired, você pode ver Function Call e, abaixo dela, update. Você pode inferir que um método update() é o retorno de chamada de requestAnimationFrame().

Observação: É neste local que a opção JS Profile que você ativo mais cedo se torna útil. Se ela tiver sido desativada, você só verá Function Call seguida de todos os eventos roxos pequenos (abordados a seguir), sem detalhes sobre exatamente que funções foram chamadas.

Agora, concentre sua atenção em todos os eventos roxos pequenos abaixo do evento update. A parte superior de muitos desses eventos é vermelha. Esse é um sinal de alerta. Passe o cursor sobre esse eventos para ver que o DevTools está alertando você de que sua página pode estar sendo vítima de refluxo forçado. O reflow forçado é apenas um outro nome para layouts síncronos forçados.

passar o cursor sobre um evento de layout

Agora, vamos examinar a função que está causando todos os layouts síncronos forçados. Clique em um dos eventos de layout para selecioná-lo. No painel Summary, você agora deve ver detalhes sobre este evento. Clique no link em Layout Forced (update @ forcedsync.html:457) para passar à definição da função.

passe para a definição da função

A definição da função deve estar exibida no painel Sources.

definição da função no painel sources

A função update() é o gerenciador de retorno de chamada de requestAnimationCallback(). O gerenciador computa cada propriedade left da imagem com base no valor offsetTop da imagem. Isso força o navegador a executar um novo layout imediatamente para garantir que ele forneça o valor correto. Forçar um layout em todo quadro da animação é a causa das animações instáveis na página.

Agora que você já identificou o problema, pode tentar corrigi-lo diretamente no DevTools.

Aplicar a correção no DevTools

Esse script é incorporado no HTML. Portanto, não é possível editá-lo no painel Sources (no entanto, scripts em *.js podem ser editados no painel Sources).

Contudo, para testar as mudanças, você pode redefinir a função no Console. Copie a definição de função do arquivo HTML e cole no Console do DevTools. Exclua a declaração que usa offsetTop e retire o comentário da logo abaixo dela. Pressione Enter após conclusão.

redefinir a função problemática

Reinicie a animação. Você pode perceber visualmente que agora está muito mais suave.

Verificar com outra gravação

É sempre uma boa prática fazer outra gravação e verificar se a animação está realmente mais rápida e com melhor desempenho do que antes.

gravação da timeline após a otimização

Muito melhor.