Updating Siblings 100

---

Measurements:

• Comparison Overview
• local - animation frame
• chunk
• postTask - user-visible
• postTask - user-blocking
• postTask - background
• react - idle
• react - immediate
• react - low
• react - no
• react - userblocking
• react - normal

---

This performance measurements aim to compare performance of a sibling component structures with rendering the children over *ngFor updating their content over *rxLet with different strategies.

Description

We have 100 items rendered over *ngFor to create the content structure, the content is rendered over a *rxLet directive. On button click we toggle the value rendered in the directive.

In the examples the way how the *rxLet directives are configured is different in their use strategy.

Orange boxes contain work, and empty boxes just differ in their background color.

Implementations

@Component({
  selector: 'rxa-sibling-strategies',
  template: `
        <ng-container *ngFor="let sibling of siblings; trackBy:trackBy">
          <div class="sibling" *rxLet="filled$; let f; strategy: strategy >&nbsp;</div>
        </ng-container>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SiblingCustomComponent {

  strategy; // Different by example

  siblings = [];
  filled$ = new BehaviorSubject<boolean>(false);

  @Input()
  set count(num: number) {
    this.siblings = toBooleanArray(num);
    this.filled$.next(!this.filled$.getValue());
  };

  trackBy = i => i;
}

Local Strategy

const strategy = {
  work: (cdRef) => cdRef.detectChanges(),
  behavior: (work: any) => o$ => o$.pipe(
                coalesceWith(priorityTickMap[SchedulingPriority.animationFrame]),
                tap(() => work())
              );
};

Chunked Strategy

const strategy = {
  work: (cdRef) => cdRef.detectChanges(),
  behavior: (work: any, context: any) => o$ => o$.pipe(
                               scheduleOnGlobalTick({
                                 priority: 0,
                                 work: work,
                                 scope: context
                               })
                             );
};

PostTask UserVisible Strategy

const strategy = {
   work: (cdRef) => cdRef.detectChanges(),
   behavior: () => o$ => o$.pipe(switchMap(v => postTaskTick({ priority: 'user-visible' }, work).pipe(mapTo(v))))
};

PostTask UserBlocking Strategy

const strategy = {
  work: (cdRef) => cdRef.detectChanges(),
  behavior: () => o$ => o$.pipe(switchMap(v => postTaskTick({ priority: 'user-blocking' }, work).pipe(mapTo(v))))
};

PostTask Background Strategy

const strategy = {
  work: (cdRef) => cdRef.detectChanges(),
  behavior: () => o$ => o$.pipe(switchMap(v => postTaskTick({ priority: 'background' }, work).pipe(mapTo(v))));
};