perf: mark scroll listeners as passive since they are never prevented

worktile · Mar 25, 2022 · 9963f8f · 9963f8f
1 parent 9d219cc
commit 9963f8f
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 30 deletions.
diff --git a/packages/gantt/src/gantt-dom.service.ts b/packages/gantt/src/gantt-dom.service.ts
@@ -39,7 +39,7 @@ export class GanttDomService implements OnDestroy {
 
     private monitorScrollChange() {
         this.ngZone.runOutsideAngular(() =>
-            merge(fromEvent(this.mainContainer, 'scroll'), fromEvent(this.sideContainer, 'scroll'))
+            merge(fromEvent(this.mainContainer, 'scroll', { passive: true }), fromEvent(this.sideContainer, 'scroll', { passive: true }))
                 .pipe(takeUntil(this.unsubscribe$))
                 .subscribe((event) => {
                     this.syncScroll(event);
@@ -96,27 +96,40 @@ export class GanttDomService implements OnDestroy {
         this.disableBrowserWheelEvent();
     }
 
-    getViewerScroll() {
-        return fromEvent<Event>(this.mainContainer, 'scroll').pipe(
-            map(() => this.mainContainer.scrollLeft),
-            pairwise(),
-            map(([previous, current]) => {
-                const event: ScrollEvent = {
-                    target: this.mainContainer,
-                    direction: ScrollDirection.NONE
-                };
-                if (current - previous < 0) {
-                    if (this.mainContainer.scrollLeft < scrollThreshold && this.mainContainer.scrollLeft > 0) {
-                        event.direction = ScrollDirection.LEFT;
-                    }
-                }
-                if (current - previous > 0) {
-                    if (this.mainContainer.scrollWidth - this.mainContainer.clientWidth - this.mainContainer.scrollLeft < scrollThreshold) {
-                        event.direction = ScrollDirection.RIGHT;
-                    }
-                }
-                return event;
-            })
+    /**
+     * @returns An observable that will emit outside the Angular zone. Note, consumers should re-enter the Angular zone
+     * to run the change detection if needed.
+     */
+    getViewerScroll(options?: AddEventListenerOptions): Observable<ScrollEvent> {
+        return new Observable<ScrollEvent>((subscriber) =>
+            this.ngZone.runOutsideAngular(() =>
+                fromEvent(this.mainContainer, 'scroll', options)
+                    .pipe(
+                        map(() => this.mainContainer.scrollLeft),
+                        pairwise(),
+                        map(([previous, current]) => {
+                            const event: ScrollEvent = {
+                                target: this.mainContainer,
+                                direction: ScrollDirection.NONE
+                            };
+                            if (current - previous < 0) {
+                                if (this.mainContainer.scrollLeft < scrollThreshold && this.mainContainer.scrollLeft > 0) {
+                                    event.direction = ScrollDirection.LEFT;
+                                }
+                            }
+                            if (current - previous > 0) {
+                                if (
+                                    this.mainContainer.scrollWidth - this.mainContainer.clientWidth - this.mainContainer.scrollLeft <
+                                    scrollThreshold
+                                ) {
+                                    event.direction = ScrollDirection.RIGHT;
+                                }
+                            }
+                            return event;
+                        })
+                    )
+                    .subscribe(subscriber)
+            )
         );
     }
 

diff --git a/packages/gantt/src/root.component.ts b/packages/gantt/src/root.component.ts
@@ -78,24 +78,26 @@ export class NgxGanttRootComponent implements OnInit {
             return;
         }
         this.dom
-            .getViewerScroll()
+            .getViewerScroll({ passive: true })
             .pipe(takeUntil(this.unsubscribe$))
             .subscribe((event) => {
                 if (event.direction === ScrollDirection.LEFT) {
                     const dates = this.view.addStartDate();
                     if (dates) {
                         event.target.scrollLeft += this.view.getDateRangeWidth(dates.start, dates.end);
-                        this.ngZone.run(() => {
-                            this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() });
-                        });
+                        if (this.ganttUpper.loadOnScroll.observers) {
+                            this.ngZone.run(() =>
+                                this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() })
+                            );
+                        }
                     }
                 }
                 if (event.direction === ScrollDirection.RIGHT) {
                     const dates = this.view.addEndDate();
-                    if (dates) {
-                        this.ngZone.run(() => {
-                            this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() });
-                        });
+                    if (dates && this.ganttUpper.loadOnScroll.observers) {
+                        this.ngZone.run(() =>
+                            this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() })
+                        );
                     }
                 }
             });