Mi pregunta es sobre Chrome DevTools, específicamente tengo preguntas sobre la pestaña Línea de tiempo. Entonces, como he leído en numerosas ocasiones, mi navegador debe tener una velocidad de 60 fps para procesar mis píxeles. A veces, aunque tiene algo de JS pesado ejecutando y evitando que sucedan 60 fps. Además, si tengo algunos CSS y JS que causan el recálculo y el repintado del árbol DOM (árbol parcial o completo), también puede tomar más de ~ 16 ms para un cuadro. Aquí está la imagen de un marco tan largo de nuestra aplicación:

Ok, aquí puedo ver claramente, que dos solicitudes toman tanto tiempo (192ms + 14ms), que el navegador no puede pintar 60 fps y ni siquiera se acerca.

Aunque aquí hay otra foto:

Entonces es mucho mejor ahora. Ahora es ~ 42 fps. Pero ahora no puedo entender por qué ...

Tengo un par de ocasiones para "actualizar el árbol de capas" y "pintar". Algunos eventos del mouse, pero todos ellos son <= 1ms aquí.

Hay 12 de estos "eventos" durante este marco. 10 de ellos son incluso menos de 0.30 ms, por lo que si los sumo todos definitivamente serán menos de 16 ms (3.57, si cuento correctamente), pero Chrome dice que este marco es de 23.9 ms.

¿Por qué Timeline dice que tengo una basura aquí? ¿Qué debo hacer para deshacerme de él y cómo saber dónde está el cuello de botella?

Estoy un poco confundido aquí, porque definitivamente extraño algo al examinar la línea de tiempo ... Así que por favor, dame una explicación detallada o algunos tutoriales detallados sobre cómo deshacerte de esos "desperdicios" y cómo detectarlos. Aunque ya leí un par de artículos y casi termino el curso de Udemy sobre rendimiento, todavía estoy confundido.

Gracias