Improving Scrolling Performance with JavaScript

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 Web Workers if, for example, the work doesn’t require DOM access. Data manipulation or traversal, such as sorting or searching, are often good fits for this model, as are loading and model generation.