javascript - Large "idle" bars in Chrome dev tools Frames Timeline - Stack Overflow

admin管理员组

文章数量:1352147

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?

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?

• javascript
• performance
• canvas
• google-chrome-devtools
• requestanimationframe

Share Improve this question Follow asked Apr 19, 2014 at 5:50 endemicendemic 1,36611 gold badge1010 silver badges2020 bronze badges 3

• 1 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. – endemic Commented Apr 22, 2014 at 10:15
• 2 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? – endemic Commented Apr 22, 2014 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 Commented May 2, 2014 at 6:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Drawing shapes to a canvas is apparently putationally 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.

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

本文标签： javascriptLarge quotidlequot bars in Chrome dev tools Frames TimelineStack Overflow