Skip to content

Commit c26dc74

Browse files
nename0mmalerba
authored andcommitted
perf(virtual-scroll): use auditTime instead of sampleTime (#13131)
The `CdkVirtualScrollViewport` uses `sampleTime` to collect multiple scroll events into one until the next animation frame. However the `sampleTime` also samples even if there is no new upstream values. Which in this case creates an basically useless requestAnimationFrame callback. A better choice would be the `auditTime` operator, which only schedules the requestAnimationFrame when there is actually a new upstream value. In our case it has the exact same behavior, as from looking at the performance profiler in chrome I found out this: first the scroll event fires, then pending requestAnimationFrame callbacks get called, regardless if they where scheduled in the current or previous frame and then the paint occurs.
1 parent bfeb540 commit c26dc74

File tree

1 file changed

+5
-4
lines changed

1 file changed

+5
-4
lines changed

src/cdk/scrolling/virtual-scroll-viewport.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {
2424
ViewEncapsulation,
2525
} from '@angular/core';
2626
import {animationFrameScheduler, Observable, Subject} from 'rxjs';
27-
import {sampleTime, startWith, takeUntil} from 'rxjs/operators';
27+
import {auditTime, startWith, takeUntil} from 'rxjs/operators';
2828
import {ScrollDispatcher} from './scroll-dispatcher';
2929
import {CdkScrollable, ExtendedScrollToOptions} from './scrollable';
3030
import {CdkVirtualForOf} from './virtual-for-of';
@@ -144,9 +144,10 @@ export class CdkVirtualScrollViewport extends CdkScrollable implements OnInit, O
144144
.pipe(
145145
// Start off with a fake scroll event so we properly detect our initial position.
146146
startWith<Event | null>(null!),
147-
// Sample the scroll stream at every animation frame. This way if there are multiple
148-
// scroll events in the same frame we only need to recheck our layout once.
149-
sampleTime(0, animationFrameScheduler))
147+
// Collect multiple events into one until the next animation frame. This way if
148+
// there are multiple scroll events in the same frame we only need to recheck
149+
// our layout once.
150+
auditTime(0, animationFrameScheduler))
150151
.subscribe(() => this._scrollStrategy.onContentScrolled());
151152

152153
this._markChangeDetectionNeeded();

0 commit comments

Comments
 (0)