Optimize JavaScript Animations

JavaScript often triggers visual changes. Sometimes that happens directly through style manipulations, and sometimes it’s through calculations, like searching or sorting data. Badly-timed or long-running JavaScript is a common cause of performance issues. Look to minimize its impact where you can.

JavaScript performance profiling can be something of an art because the JavaScript you write is nothing like the code that is actually executed. Modern browsers use JIT compilers and all manner of optimizations and tricks to try and give you the fastest possible execution, which substantially changes the dynamics of the code.

With all that said, however, there are some things that you can do to help your apps execute JavaScript well.

Use requestAnimationFrame() for visual changes

When visual changes are happening on-screen, you want to do your work at the right time for the browser, which is right at the start of the frame. The only way to guarantee that your JavaScript will run at the start of a frame is to use requestAnimationFrame.