Scroll throttle how to choose a good amount for miliseconds?

Question

I am throttling a scroll event like so:

window.addEventListener('scroll', throttle(() => {
    console.log('scroll event triggered with throttle');
}, 150));

Because I do not want the scroll event to trigger 100's of times per second when somebody scrolls I have throttled it with a lodash throttle function.

I have read up on numerous articles which talk about doing this for obvious performance reasons but none talk about what kind of amount to set for the milliseconds on the throttle.

Of course this might depend on the use case and what code actually gets executed within the throttle. In my case I am doing a viewport check to see if something is still within the viewport.

How would you try and find a suitable amount for the milliseconds? Of course I would love to go as low as possible because it will fire an AJAX requests faster when it comes to an infinite scroll but I also do not want to cause performance issues.

It is hard testing this on a high-end desktop because I will probably never run into performance issues.

A pretty broad question but I would love to know (preferably in chrome) if this can be profiled for worst case scenarios.

I'm not a computer scientist by trade, so hopefully someone can chime in, but first you need a way to "measure" your current processing time, and also think about your min/max that you can handle. But the basics of a feedback control system would be using that measurement to either increase or decrease the current throttle time. So basically, as the processing time increases, increase the throttling, or as it decreases, decreases the throttling. Profiling it for worst case scenarios is just asking for a crappy mobile phone that runs at the speed of snail. — Cody Ｇ, Dec 20 '17 at 15:13
First off .... would you like to use someone else's accepted answer, and then, after spending time to implement it, later find out it does not work cross browsers? ... If not, then reconsider this accepted answer: https://stackoverflow.com/questions/47887564/flexbox-equal-column-height-set-dominant-column-height — Asons, Jan 01 '18 at 20:01
Second... when it comes to throttle an event, it boils down to how long time between each redraw you want. A common time is what [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) use, which is about 60 times per second. `requestAnimationFrame` is suggested here, [Events/resize](https://developer.mozilla.org/en-US/docs/Web/Events/resize), to be used to throttle the `resize` event, with a 66 ms set on its fallback using `setTimeout` — Asons, Jan 01 '18 at 20:01

score 1 · Answer 1 · edited Aug 24 '22 at 10:16

In your case, I suggest using IntersectionObserver.

There still will be performance considerations, but if you only want to check that content is visible, it is a relatively fast operation - the observer will give you this information on IntersectionObserverEntry.

When doing some animations, try to target your animation's frame rate of 60fps (one frame per 16ms) and use. If you want to handle orientation change or resize, I'd suggest to add a delay of 450ms (empirically counted duration of orientation change on iPad which in our experiments was largest value of all devices tested).

As for testing, chromium-based browsers allow you to throttle the CPU:

I'm not sure if it is available in other browsers.

In any case it might be a good idea to postpone code execution with requestAnumationFrame (for animations) or requestIdleCallback (for computations). It will help to avoid bottlenecks to some degree.

Scroll throttle how to choose a good amount for miliseconds?

1 Answers1