Uma Tarefa longa é um código JavaScript que monopoliza a linha de execução principal por longos períodos, fazendo com que a IU "congele".
Enquanto uma página é carregada, as tarefas longas podem vincular a linha de execução principal e fazer com que a página não responda à entrada do usuário, mesmo que pareça pronta. Cliques e toques geralmente não funcionam porque recursos interativos, como listeners de eventos e manipuladores de cliques, ainda não foram anexados aos elementos da interface. Por isso, tarefas longas podem aumentar significativamente o tempo para interação da página.
Agora, o Chrome DevTools pode visualizar tarefas longas, facilitando a visualização das tarefas que precisam de otimização.
O que conta como uma tarefa longa?
Tarefas longas com uso intenso de CPU são causadas por trabalhos complexos que levam mais de 50 ms. O modelo RAIL sugere que você processe eventos de entrada do usuário em 50 ms para garantir uma resposta visível em 100 ms e preservar a conexão entre ação e reação.
Importante: embora o modelo RAIL sugira uma resposta visual à entrada do usuário em até 100 ms, os limites da métrica Interaction to Next Paint (INP) permitem até 200 ms para definir expectativas mais realistas, especialmente para dispositivos mais lentos.
Existem tarefas longas na minha página que podem atrasar a interatividade?
Até agora, você precisava procurar manualmente "longos blocos amarelos" de script com mais de 50 ms no Chrome DevTools ou usar a API Long Tasks para descobrir quais tarefas estavam atrasando a interatividade.
Para facilitar o fluxo de trabalho de auditoria de desempenho, o DevTools agora visualiza tarefas longas. Tarefas (mostradas em cinza) têm sinalizações vermelhas se forem tarefas longas.
Para usar a nova ferramenta de visualização:
- Registre um rastro no painel de desempenho para carregar uma página da Web.
- Procure uma sinalização vermelha na visualização da linha de execução principal. Você vai ver que as tarefas estão marcadas em cinza e com o rótulo Task.
- Mantenha o ponteiro do mouse sobre uma barra cinza. Você verá uma caixa de diálogo mostrando a duração da tarefa e se ela é considerada uma tarefa longa.
O que está causando minhas tarefas longas?
Para descobrir a causa de uma tarefa longa, selecione a barra cinza Task. Na gaveta abaixo, selecione Bottom-Up e Group by Activity. Isso permite ver quais atividades contribuíram mais (no total) para a tarefa que levou tanto tempo para ser concluída. No exemplo a seguir, a causa do atraso é um conjunto caro de consultas DOM.
Quais são as maneiras comuns de otimizar as tarefas longas?
Scripts grandes costumam ser uma das principais causas de tarefas longas. Considere dividi-los. Além disso, fique de olho nos scripts de terceiros, que também podem conter tarefas longas que atrasam a interatividade do conteúdo principal.
Divida todo o seu trabalho em partes com menos de 50 ms e execute-as no lugar e momento certos. O lugar certo para algumas delas pode ser fora da linha de execução principal, em um service worker. Para orientações sobre como dividir tarefas longas, consulte Otimizar tarefas longas e Ocioso até urgente de Phil Walton.
Mantenha suas páginas responsivas. Minimizar tarefas longas é uma ótima maneira de garantir que os usuários tenham uma ótima experiência ao visitar seu site. Para mais informações sobre tarefas longas, consulte Métricas de desempenho centradas no usuário.