What is the blank space in chrome's new vertical timeline?

Question

I'm running a simple viewbox animation in raphael using requestAnimationFrame in chrome. I'm noticing all scripting and rendering tasks are completed yet I still see anywhere between 30 and 60ms of "dead space" where it looks like the browser is sitting there doing nothing. Any insight into this?

Exuviate

Did you have any luck figuring out what caused the blank space? I'm seeing something similar but the activity bars also start part way through a frame with blank space at the beginning. – Echinoid

Answer 1

I went on this question looking for the same answer and as it seems nobody provided a response, here is what I found.

According to the Chrome DevTools documentation about the Clear and Light Grey Frame, the blank space is the time your browser was idle.

Why is it idle?

The short version is that a hollow frame means one of two things: your javascript main thread was busy doing other stuff that the Chrome Dev Team forgot to show in DevTools or you were bottlenecked on your GPU.

To tell the difference, you can enable "Timeline: Show CPU Activity on the Ruler" inside DevTools' settings (you know, the cog in the bottom right hand corner).

You will end with something like this:

See the little dark grey blocks on the "Records" row? Those are dark when the renderer thread was busy. If the renderer thread is mostly idle, e.g. no dark block, as is the case the screenshot I yanked for this post, it is a very good signal that you are GPU bound.

Downcome

If its dark grey like in the picture you provided is there any way to find out what it is? – Nauru

Answer 2

Here's the full explanation from Chrome Engineer Nat Duca.

https://plus.google.com/+NatDuca/posts/BvMgvdnBvaQ

Dibs