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?

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.

Answer 2

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