Uma tarefa longa é um código JavaScript que monopoliza a linha de execução principal por longos períodos, fazendo com que a interface "congele".
Enquanto uma página está sendo carregada, as tarefas longas podem ocupar 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. Os cliques e toques geralmente não funcionam porque os recursos interativos, como listeners de eventos e manipuladores de cliques, ainda não foram anexados aos elementos da interface. Por isso, as tarefas longas podem aumentar muito o tempo de interação.
Agora, o Chrome DevTools pode visualizar tarefas longas, facilitando a visualização de tarefas que precisam ser otimizadas.
O que conta como uma tarefa longa?
As tarefas longas que consomem muita 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.
Ponto-chave: embora o modelo RAIL sugira fornecer 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 alcançáveis, especialmente para dispositivos mais lentos.
Há long tasks na minha página que podem atrasar a interatividade?
Até agora, era necessário procurar manualmente "blocos amarelos longos" 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, as Ferramentas do desenvolvedor agora mostram as tarefas longas. As tarefas (mostradas em cinza) têm sinalizações vermelhas se forem longas.
Para usar a nova ferramenta de visualização:
- Grave um trace no painel de desempenho do carregamento de uma página da Web.
- Procure uma bandeira vermelha na visualização da linha de execução principal. As tarefas agora estão marcadas em cinza e rotuladas como Tarefa.
- Mantenha o ponteiro do mouse sobre uma barra cinza. Uma caixa de diálogo vai mostrar a duração da tarefa e se ela é considerada longa.
O que está causando minhas tarefas longas?
Para descobrir a causa de uma tarefa demorada, selecione a barra cinza Task. Na gaveta abaixo, selecione Bottom-Up e Group by Activity. Isso permite que você veja quais atividades contribuíram mais (no total) para a tarefa que demorou tanto para ser concluída. No exemplo abaixo, a causa do atraso parece ser um conjunto caro de consultas DOM.
Quais são as maneiras comuns de otimizar tarefas longas?
Os scripts grandes geralmente são uma das principais causas de tarefas longas. Considere dividir as tarefas. Também fique de olho em scripts de terceiros, que também podem conter tarefas longas que atrasam a interação do conteúdo principal.
Divida todo o trabalho em partes que sejam executadas em menos de 50 ms e execute essas partes no lugar e momento certos. O lugar certo para alguns deles pode estar fora da linha de execução principal, em um worker de serviço. Para orientações sobre como dividir tarefas longas, consulte Otimizar tarefas longas e Idle Until Urgent (em inglês) de Phil Walton.
Mantenha as páginas responsivas. Minimizar tarefas longas é uma ótima maneira de garantir que seus usuários tenham uma experiência agradável ao visitar seu site. Para mais informações sobre tarefas longas, consulte Métricas de desempenho centradas no usuário.