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?
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.
