Improving Scrolling Performance with JavaScript
Explore techniques for improving scrolling performance by reducing JavaScript complexity and managing execution time on the main thread. Learn how to use web workers for computational tasks, batch long tasks with requestAnimationFrame, and measure performance with DevTools to keep your app responsive during animations.
We'll cover the following...
Reduce complexity or use web workers
JavaScript runs on the browser’s main thread, right alongside style calculations, layout, and, in many cases, paint. If your JavaScript runs for a long time, it will block these other tasks, potentially causing missed frames. You should be tactical about when JavaScript runs, and for how long. For example, if you’re in an animation like scrolling, you should be looking to keep your JavaScript somewhere in the region of 3-4ms. Any longer than that and you risk taking up too much time. If you’re in an idle period, you can afford to be more relaxed about the time taken.
In many cases, you can move pure computational work to ...