How to understand Chrome devtools' Timeline properly?

Question

My question is about the Timeline tab in Chrome DevTools.

I've read numerous times that 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 does Timeline say 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.

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: