Menu
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?
664
This is idle time, the time when the browser is waiting on the CPU or GPU to do some processing. It is shown in the pie chart screenshot in the documentation page How to Use the Timeline Tool.
To access the Performance tab, navigate to the website you want to profile, then open Chrome DevTools by right-clicking and selecting Inspect. Select the Performance tab inside Chrome DevTools. The easiest way to capture a performance profile is by clicking the Start profiling and reload page icon.
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.
119
Compare those peaks to the memory graph. In my experience, large idle spikes seem to coincide with garbage collection.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
