I'm trying to understand a few things about the timeline in the Chrome Dev Tools. From the documentation, I gather that the grey and clear bars are "Activity that was not instrumented by DevTools" and "Idle time between display refresh cycles", respectively.
I have an app that renders updates each frame (requestAnimationFrame()
) and has a typical timeline profile pictured below:
Unfortunately, to me the documentation does not make it clear how to evaluate the grey and white space in my application. My questions are:
Will the "idle" clear bars always fill the time between renders?
In other words, is the profile I'm seeing expected, in regard to the white bars? I'm tempted to assume so, but the example screenshot in the documentation looks like:
There are clearly frames where the white space does not fill the space between renders.
Is there a rough relationship between the timeline profile and cpu utilization on the machine the profile is collected on?
In the profile below, about 40% of the time is idle, so could I expect that to correspond to using ~60% of a core for the operations represented in the profile?
Is there any way to characterize the "Uninstrumented" grey bars?
Or are there typical things which this could be (Garbage Collection, etc...)?
Hopefully that is not too much for one question. Thanks in advance