FabricJS performance hack
While playing around with FabricJS, noticed that the renderAll method is called by fabric event handlers. After a profile made with Chrome DevTools it was clear that we can improve the frame rate by only rendering inside a requestAnimationFrame callback.
I started working with FabricJS this week so there’s a big chance things might break. I couldn’t find any place this might break after going through the canvas.renderAll method source code but this needs more tests before it can be used in any project. Here’s screenshots of profiles before and after applying the hack on an example scene.
The frame rate can be improved further by running requestAnimationFrame in a loop ( example: using the play function in the gist ).
Even if this hack works, you’ll need to do customize the hack depending on your application. Like I said, I’ve only started using FabricJS this week so if there’s something wrong with the code, please let me know with a comment.
