14

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?

frames with lots of idle time

endemic
  • 1,369
  • 1
  • 10
  • 20
  • 1
    Similar questions: [one](http://stackoverflow.com/questions/12302286/what-causes-chrome-timeline-frame-to-have-so-much-empty-white-space?rq=1), [two](http://stackoverflow.com/questions/11423330/web-inspector-profiling-with-frames-finding-the-cause-of-performance-problems), [three](http://stackoverflow.com/questions/18257206/extra-render-time-in-chrome-dev-tools-timeline-frames). No helpful info. A few references to [this G+ post by Nat Duca](https://plus.google.com/+NatDuca/posts/BvMgvdnBvaQ?e=-RedirectToSandbox), but I'm not doing anything with 3D transforms, so I don't think it's applicable. – endemic Apr 22 '14 at 10:15
  • 2
    From [DevTools documentation](https://developers.google.com/chrome-developer-tools/docs/timeline#frames_mode): "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? – endemic Apr 22 '14 at 10:16
  • I have the same issue; frames finishing in like 3ms but with insane idle times, sometimes 200ms; what gives? broken dev tools? – AlexG May 02 '14 at 06:46

2 Answers2

5

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.

endemic
  • 1,369
  • 1
  • 10
  • 20
  • Is it possible for you to post what your timeline profile looks like after the improvements? – sethro Nov 18 '15 at 16:39
  • @sethro Seems the interface has changed a bit, but [here's a similar screenshot](http://imgur.com/0WQPg8b). Note the computation/rendering falls well within each ~16ms frame. – endemic Mar 08 '16 at 19:31
1

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

rockinghelvetica
  • 11
  • 2