Skip to content Skip to sidebar Skip to footer
Home / Frame Rate / Google Chrome Devtools / Javascript / Performance / Webpage Rendering

How To Understand Devtools Timeline Properly?

Post a Comment
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. Somet

Solution 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: Timeline shows white gap on right side

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

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:

enter image description here


Post a Comment for "How To Understand Devtools Timeline Properly?"