Large "idle" bars in Chrome dev tools Frames Timeline

Question

I'm drawing some shapes (arc, lineTo, etc.) to a using requestAnimationFrame. Nothing too fancy, but I'm noticing some occasional jerky animation. I profiled using the Timeline inspector in Chrome dev tools, and am seeing a large amount of idle time per frame, some of which drops the FPS below 60 (see screenshot). Is there a known cause or resolution for this?

Botanomancy

Similar questions: one, two, three. No helpful info. A few references to this G+ post by Nat Duca, but I'm not doing anything with 3D transforms, so I don't think it's applicable. – Botanomancy

From DevTools documentation: "You may notice regions of a frame that are light-gray or clear (hollow). These regions indicate, respectively: 1.) Activity that was not instrumented by DevTools 2.) Idle time between display refresh cycles. The frames in the recording below show both un-instrumented activity and idle time." However, that doesn't really explain how to fix the problem. If the clear section of the frame is idle time, why does it cause frames to skip? – Botanomancy

I have the same issue; frames finishing in like 3ms but with insane idle times, sometimes 200ms; what gives? broken dev tools? – Guipure

Answer 1

Drawing shapes to a canvas is apparently computationally expensive, and must fall under "activity that was not instrumented by DevTools." I solved my performance issue by first drawing shapes to an offscreen canvas cache, then using drawImage to copy back to the main canvas.

Botanomancy

Is it possible for you to post what your timeline profile looks like after the improvements? – Shadow

@Shadow Seems the interface has changed a bit, but here's a similar screenshot. Note the computation/rendering falls well within each ~16ms frame. – Botanomancy

Answer 2

Compare those peaks to the memory graph. In my experience, large idle spikes seem to coincide with garbage collection.

Tavish