Minha pergunta é sobre o Chrome DevTools, especificamente eu tenho uma pergunta sobre a guia Linha do tempo. Então, como eu li várias vezes, meu navegador precisa ter uma velocidade de 60fps processando meus pixels. Às vezes, embora tenha algum JS pesado executando e impedindo que 60fps aconteçam. Além disso, se eu tiver algum CSS e JS que causem recalcular e repintar a árvore DOM (parte ou árvore completa), também pode levar mais de ~ 16ms para um quadro. Aqui está a imagem de um quadro tão longo do nosso aplicativo:

Ok, aqui posso ver claramente que duas solicitações demoram tanto tempo (192ms + 14ms), que o navegador não consegue pintar 60fps e nem chega perto.

Embora aqui esteja outra foto:

Então está muito melhor agora. Agora é ~ 42fps. Mas agora eu não consigo entender o porquê ..

Eu tenho algumas ocasiões de "atualizar camada de árvore" e "pintar". Alguns eventos de mouse, mas todos eles são <= 1ms aqui.

Existem 12 desses "eventos" durante esse quadro. 10 deles são ainda menores que 0,30 ms; portanto, se somar todos, com certeza será menor que 16 ms (3,57, se contar corretamente), mas o Chrome diz que esse quadro é de 23,9 ms.

Por que a linha do tempo diz que eu tenho um lixo aqui? O que devo fazer para me livrar dele e como saber onde está o gargalo?

Estou um pouco confuso aqui, porque definitivamente sinto falta de alguma coisa ao examinar a linha do tempo. Então, por favor, me dê uma explicação detalhada ou alguns tutoriais detalhados sobre como se livrar desses "lixo" e como detectá-los. Embora eu já tenha lido alguns artigos e quase tenha terminado o curso de desempenho da Udemy, ainda estou confuso.

Obrigado