Potential performance improvements by using passive event listener

[dpraul]

Hello! I was reading through the addEventListener spec on MDN and noticed that there is a whole section dedicated to supposed browser optimizations that can be gained when listening to the scroll event by applying the { passive: true } option.

I noticed that this optimization is not applied here in vscroll, and I couldn't find any calls to event.preventDefault() in a cursory search, which leads me to believe there would be no side-effects to doing so.

Seems like a simple addition, but I'm not certain if you have any benchmarking tools tucked away to measure if there would actually be a performance difference by using it.

[dhilt]

@dpraul Thanks for the issue! Actually we don't have performance measurements in this project, and that's the interesting point. But what we can do now is take a look at the Routines class (which is a part of the vscroll API and can bu used to customize DOM-related logic) and see how it can be useful. The Routines is the place where you may add passive parameter to the scroll event listener right in your App and it will be applied by the scroller's core during the VScroll initialization.

[dpraul]

Actually, we're using ngx-ui-scroll in our application, but I did manage to test it in a roundabout way (though I wouldn't send this code to production). When creating the adapter, I manually passed in the viewport with an overridden addEventListener, like so:

class Component {
  @ViewChild('scrollViewport') scrollViewport: ElementRef<HTMLElement>;

  datasource = new Datasource({
    settings: {
      viewportElement: () => ({
        ...this.scrollViewport.nativeElement,
        addEventListener: (eventName: string, handler: EventListener) => {
          this.scrollViewport.nativeElement.addEventListener(eventName, handler, { passive: true });
        },
      }),
    },
  });
}

It definitely works with { passive: true } - no errors are thrown, and the virtual scroll works just fine! Anecdotally, it appears to be able to scroll more smoothly, but it's difficult to put hard numbers to that as our app adds additional blocking operations during the scroll.

[dhilt]

@dpraul Ok, I published v3.0.1-passive release, which contains { passive: true } parameter. Could you please try it, maybe do some more research, compare with v3.0.1... I might have time to do it myself, but I'm not sure when.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed within seven days if no further activity occurs. If it needs to remain open, add the "permanent" label.