My question is about Chrome DevTools, specifically I have question about Timeline tab. So as I've read numerous times, my browser has to have 60fps speed rendering my pixels. Sometimes though it has some heavy JS executing and preventing 60fps happening. Also if I have some CSS and JS which cause recalculating and repainting of the DOM tree(part or full tree) it may also take more than ~16ms for one frame. Here is the picture of such a long frame from our app:
Ok, here I can clearly see, that two requests take so much time(192ms + 14ms), that browser can't paint 60fps and it doesn't get even close there.
Though here is another picture:
So it's much better now. Now it's ~42fps. But Now i can't understand why..
I have couple of "update layer tree" and "paint" occasions. Some mouse events, but all of them are <=1ms here.
There are 12 such "events" during this frame. 10 of them are even less then 0.30ms, so if I sum them all it will definitely be less then 16ms(3.57, if I count correctly), but Chrome says this frame is 23.9ms.
Why Timeline says that I have a junk here? What should I do to get rid of it and how to know where is the bottleneck?
I'm a bit confused here, because I definitely miss something in examining the timeline.. So please, give me some detailed explanation or some detailed tutorials about how to get rid of such "junks" and how to detect them. Though I've already read couple of articles and almost finished Udemy course on performance, I'm still confused..
Thank you