6

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:

enter image description here enter image description here

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:

enter image description here

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

1 Answer 1

4

Will the "idle" clear bars always fill the time between renders?

No. This idle time is essentially GPU bound. It is where the browser is waiting on the GPU to do its thing and return. It is perfectly fine to have fluctuation here, so long as you're hitting roughly 60FPS, it's all good.

Is there a rough relationship between the timeline profile and cpu utilization on the machine the profile is collected on?

Not really as far as I am aware. Idle here is time where the browser is waiting for some other part of the system (CPU or GPU primarily) to do its job. It isn't related to how many resources it is using.

Is there any way to characterize the "Uninstrumented" grey bars?

Absolutely not, this is why it is called "Uninstrumented". It means the DevTools has no idea what is going on. Things like Garbage Collection do get marked on the timeline, since it knows what that task is. The team is working on narrowing down this type of material. It is a slow process to track it all down and figure out how to surface it to DevTools, so we will have uninstrumented time for quite a while.

6
  • I have seen the post on being "GPU bound" referenced in the documentation I linked to, but I have tried shrinking my screen to see if things improve and they do not, suggesting that it is "something else". I was hoping for additional information to what is vaguely suggested in the documentation.
    – sethro
    Nov 24, 2015 at 16:23
  • Viewport size won't affect the length of time something is GPU bound, at least not in most situations. Even if there were such a correlation, it would be marginal.
    – Garbee
    Nov 24, 2015 at 19:54
  • could you point me to a reference explaining that? So far the post I mentioned is all I've found, which suggests the opposite. plus.google.com/+NatDuca/posts/BvMgvdnBvaQ
    – sethro
    Nov 24, 2015 at 20:02
  • That "layers" thing only applies if you have a bunch of layers. Enable DevTools Experiments flag in chrome://flags then in DevTools, go to settings > experiments tab. From there, enable the "Layers Panel". Once DevTools is restarted, check that panel on your site to get an idea of how many layers you have. If you have plenty, then layer size may play a part in bottlenecking the GPU. If not, then your site is one big layer and the viewport size isn't going to be much of an issue.
    – Garbee
    Nov 24, 2015 at 21:10
  • ok, can you point me to a reference on "GPU boundedness" within Chrome so I can understand this better?
    – sethro
    Nov 24, 2015 at 23:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.