Terra-core: [terra-scroll] Add scrolling callback debounce to suppress pointer events

[dkasper-was-taken]

Feature Request

Description

Update terra-scroll to suppress pointer events during scrolling to improve page performance. A short ~50ms debounce following the end of the scroll ticks will then restore pointer events.

@ Mentions

@tbiethman @mjhenkes

[nramamurth]

@dkasper-was-taken @tbiethman I have a rough prototype created - https://github.com/cerner/terra-core/commit/d7b738acd7a416aabf1fafcbf311ebf93c583b04. Is this something that we'd want to achieve?

I basically have a onScroll event listener where I _suppress_ the pointer events that are associated with the scroll element and _restore_ them after a delay. I have tested this out on a test page.

Let me know if I have to cover broader scenarios or if I have not addressed something.

cc: @ShettyAkarsh

[dkasper-was-taken]

It'd be good to spike into the performance improvements, if at all. I originally logged this thinking we could prevent some additional pointer events firing, but looks like most libraries just use it to halt momentum scrolling to prevent scroll events occuring faster than javascript calculations to avoid visual screen tearing.

[nramamurth]

I see. I profiled the test page and I noticed that the FPS is ~60 with (and without) suppressing the pointer events with a delay of 50ms. I also noticed that the paint time has reduced (not by a lot imo) with the fix while impacting (increasing) the scripting time (prolly because of the new event handler) for a series of 10 subsequent scroll events. It will be helpful if you could help me figure out what exactly I should be looking at while analysing the performance at this point.

Before:

After:

@dkasper-was-taken @tbiethman any thoughts?

[nramamurth]

@dkasper-was-taken Is there an application page that I could probably stress-test on if you think the existing test page is too light a benchmark for me to analyse the performance?

[nramamurth]

I figured that the dev site uses terra-scroll and noticed that the scroll isn't smooth with the delay - I had to scroll twice for something that I'd expect to get to by scrolling once. The screen captures below should illustrate the behavior:

Without Suppression:

With Suppression:

@dkasper-was-taken What do you think?

Branch: https://github.com/cerner/terra-core/compare/suppress-pointer-events

[dkasper-was-taken]

I imagine for now we can skip this change. It seems like introducing it as broadly as terra-scroll it too much. Might be better on a specific per instance introduction, where lots of javascript or loading is occurring on scroll.

[bjankord]

That sounds good to me, we can keep this in our pocket for when those instances come up. Nice work @nramamurth looking into this! 👍