How to understand devtools timeline properly?

Question

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

Answer 1

I suspect that there is "native" code executing in that open space that the timeline doesn't report.

You might want to try using the "Profiles" tab in dev tools to take a CPU Profile instead. That will show a bar for "(Program)" which is native Chrome code that is executing. That might at least be a start to figuring out what is happening.

Timeline shows white gap on right side:

Profiler shows that (Program) and a garbage collection "(g...r)" happen there

If there is a big block of "(Program)" there, then I think you can use the chrome://tracing tab which will show all the native / internal stuff going on: