Slide 1

Slide 1 text

Angular Performance Your App at the Speed of Light Christian Liebel @christianliebel Consultant

Slide 2

Slide 2 text

Don’t over-optimize. Angular Performance Your App at the Speed of Light First Rule

Slide 3

Slide 3 text

Angular Performance Your App at the Speed of Light Change Detection Basics

Slide 4

Slide 4 text

Hi Angular! Basics // app.component.html

Hi {{ title }}!

// app.component.ts @Component({ /* … */ }) export class AppComponent { title = 'Angular'; } Angular Performance Your App at the Speed of Light Change Detection

Slide 5

Slide 5 text

Basics // app.component.html

Hi {{ title }}!

Update // app.component.ts @Component({ /* … */ }) export class AppComponent { title = 'Angular'; update() { this.title = 'Foo'; } } Angular Performance Your App at the Speed of Light Change Detection Hi Foo! Hi Angular! Update

Slide 6

Slide 6 text

Basics Change detection… - is the magical part of Angular that makes data binding “just work” - is a very handy feature that helps a lot, but it can also work against you - is strongly related to Angular application performance Angular Performance Your App at the Speed of Light Change Detection

Slide 7

Slide 7 text

Component Tree AppComponent NavComponent ContentComponent ListComponent Angular Performance Your App at the Speed of Light Change Detection

Slide 8

Slide 8 text

Change Detector Tree AppComponent NavComponent ContentComponent ListComponent Angular Performance Your App at the Speed of Light Change Detection AppComponent CD NavComponent CD ContentComponent CD ListComponent CD CHANGE

Slide 9

Slide 9 text

Change Detector detectChanges() Called when an event has occured and bindings should be checked Angular Performance Your App at the Speed of Light Change Detection this.title = 'Foo';

Hi {{ title }}!

Slide 10

Slide 10 text

Per default, each change in your application leads to… - A single CD cycle - From top to bottom (all components) - Unidirectional (no cycles allowed) Angular Performance Your App at the Speed of Light Change Detection DEMO

Slide 11

Slide 11 text

Angular Performance Your App at the Speed of Light

Slide 12

Slide 12 text

First findings Reduce duration of a change detection cycle - Reduce amount of bindings (e.g. grids: virtual scrolling via CDK) - Avoid binding to (computationally intensive) getters or functions Keep CD cycle < 16 ms! Angular Performance Your App at the Speed of Light Change Detection

Slide 13

Slide 13 text

Profiling // main.ts platformBrowserDynamic().bootstrapModule(AppModule).then(module => enableDebugTools(module.injector.get(ApplicationRef).components[0])); Execute ng.profiler.timeChangeDetection() to measure the duration of a change detection run (500ms or 5 change detection cycles) Angular Performance Your App at the Speed of Light Change Detection DEMO

Slide 14

Slide 14 text

Angular Performance Your App at the Speed of Light

Slide 15

Slide 15 text

Angular Performance Your App at the Speed of Light Zone.js & NgZone

Slide 16

Slide 16 text

How to detect a change? AppComponent NavComponent ContentComponent ListComponent Angular Performance Your App at the Speed of Light Zone.js AppComponent CD NavComponent CD ContentComponent CD ListComponent CD CHANGE

Slide 17

Slide 17 text

A look at Angular’s dependencies "dependencies": { "@angular/common": "~8.2.3", "rxjs": "~6.4.0", "zone.js": "~0.9.1" }, Zone.js Your App at the Speed of Light Angular Performance

Slide 18

Slide 18 text

A Meta-Monkey Patch Zone.js setTimeout setInterval geolocation.getCurrentPosition XMLHttpRequest PromiseRejectionEvent requestAnimationFrame click focus mousemove addEventListener Your App at the Speed of Light Angular Performance

Slide 19

Slide 19 text

Execution Context Debugging Pending asynchronous tasks are known Profiling Measuring performance (Google Web Tracing Framework) Mocking/Testing Hooks beforeTask, … Zone.js Your App at the Speed of Light Angular Performance

Slide 20

Slide 20 text

NgZone Angular Performance Your App at the Speed of Light Zone.js current (global) zone NgZone Angular boot

Slide 21

Slide 21 text

NgZone NgZone catches asynchronous operations from the Angular app When no tasks are remaining for the current VM turn, the NgZone will trigger a change detection cycle (tick) Angular Performance Your App at the Speed of Light Zone.js NgZone setTimeout setInterval onclick Detect changes Detect changes Detect changes

Slide 22

Slide 22 text

Change Detection Trigger Angular Performance Your App at the Speed of Light Zone.js NgZone.onMicrotaskEmpty ApplicationRef.tick() view1.detectChanges() view2.detectChanges() viewN.detectChanges()

Slide 23

Slide 23 text

@Injectable() export class ApplicationRef { // … constructor (/* … */) { this._zone.onMicrotaskEmpty .subscribe( {next: () => { this._zone.run(() => { this.tick(); }); }}); } // … tick(): void { // … for (let view of this._views) { view.detectChanges(); } // … } // … } Angular Performance Your App at the Speed of Light https://github.com/angular/angular/blob/master/packages/core/src/application_ref.ts

Slide 24

Slide 24 text

Common Pitfalls Long CD cycles in combination with high-frequency events - mousemove - scroll - requestAnimationFrame - setInterval with short intervals (clocks!) Angular Performance Your App at the Speed of Light Zone.js DEMO

Slide 25

Slide 25 text

Angular Performance Your App at the Speed of Light

Slide 26

Slide 26 text

NgZone Zone.js current (global) zone NgZone mousemove Detect changes mousemove Detect changes mousemove Detect changes mousemove Detect changes Your App at the Speed of Light Angular Performance

Slide 27

Slide 27 text

NgZone Opt-Out constructor (ngZone: NgZone) { ngZone.runOutsideAngular(() => { // runs outside Angular zone, for performance-critical code ngZone.run(() => { // runs inside Angular zone, for updating view afterwards }); }); } Zone.js Your App at the Speed of Light Angular Performance ! View and model can get out of sync!

Slide 28

Slide 28 text

NgZone Zone.js current (global) zone NgZone mousemove mousemove mousemove mousemove Your App at the Speed of Light Angular Performance DEMO

Slide 29

Slide 29 text

Angular Performance Your App at the Speed of Light

Slide 30

Slide 30 text

Disable Patches (polyfills.ts) (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames Angular Performance Your App at the Speed of Light Zone.js ! View and model can get out of sync!

Slide 31

Slide 31 text

Disable Zone (= disable async change detection!) platformBrowserDynamic().bootstrapModule(AppModule, { ngZone: 'noop' }); constructor(applicationRef: ApplicationRef) { applicationRef.tick(); // trigger CD yourself } Angular Performance Your App at the Speed of Light Zone.js ! View and model can get out of sync!

Slide 32

Slide 32 text

Angular Performance Your App at the Speed of Light Change Detection Strategies

Slide 33

Slide 33 text

Overview Default Uses Zone.js for detecting changes and updates bindings OnPush Restricts change detection to changes of @Input parameters Angular Performance Your App at the Speed of Light Change Detection Strategies AppComponent CD NavComponent CD ContentComponent CD ListComponent CD AppComponent CD NavComponent CD ContentComponent CD ListComponent CD OnPush

Slide 34

Slide 34 text

OnPush @Component({ selector: 'my-component', template: '{{ foo }}', changeDetection: ChangeDetectionStrategy.OnPush }) export class MyComponent { @Input() public foo: string; } Change detection only reacts to changes of @Input parameters Angular compares the values passed to an @Input parameter (newValue === oldValue). If you are passing objects, make sure to pass in new instances! Angular Performance Your App at the Speed of Light Change Detection Strategies ! View and model can get out of sync! DEMO

Slide 35

Slide 35 text

Angular Performance Your App at the Speed of Light

Slide 36

Slide 36 text

Angular Performance Your App at the Speed of Light Change Detector

Slide 37

Slide 37 text

OnPush & Detecting Changes What to do if a component changes unrelated to an @Input parameter? constructor(private dataService: DataService) {} ngOnInit() { this.dataService.updates$ .subscribe(newData => this.data = newData); // no update! } Angular Performance Your App at the Speed of Light Change Detector

Slide 38

Slide 38 text

ChangeDetectorRef constructor(cdRef: ChangeDetectorRef) {} A reference to the ChangeDetector of your component - detectChanges() - markForCheck() - detach() - checkNoChanges() - reattach() Angular Performance Your App at the Speed of Light Change Detector

Slide 39

Slide 39 text

markForCheck() Explicitly marks a component as dirty/changed (when using OnPush) Angular Performance Your App at the Speed of Light Change Detector AppComponent CD NavComponent CD ContentComponent CD ListComponent CD DIRTY AppComponent CD NavComponent CD ContentComponent CD ListComponent CD OnPush

Slide 40

Slide 40 text

markForCheck() constructor(private dataService: DataService, private cdRef: ChangeDetectorRef) {} ngOnInit() { this.dataService.updates$.subscribe(newData => { this.data = newData; this.cdRef.markForCheck(); }); } Angular Performance Your App at the Speed of Light Change Detector

Slide 41

Slide 41 text

Angular Performance Your App at the Speed of Light Async Pipe

Slide 42

Slide 42 text

Overview Takes observables or promises {{ data$ | async }} Waits for the observable to emit/promise to resolve and then displays the value Angular Performance Your App at the Speed of Light Async Pipe

Slide 43

Slide 43 text

Advantages For observables: - Async Pipe subscribes for you - Async Pipe takes care of unsubscribing from the observable - Async Pipe calls markForCheck for each update – perfect match for OnPush! Angular Performance Your App at the Speed of Light Async Pipe

Slide 44

Slide 44 text

Code @Injectable() @Pipe({name: 'async', pure: false}) export class AsyncPipe implements OnDestroy, PipeTransform { // … private _updateLatestValue(async: any, value: Object): void { if (async === this._obj) { this._latestValue = value; this._ref.markForCheck(); } } } Angular Performance Your App at the Speed of Light Async Pipe https://github.com/angular/angular/blob/master/packages/common/src/pipes/async_pipe.ts

Slide 45

Slide 45 text

Simplifying OnPush // component.ts data$: Observable; constructor(dataService: DataService) { this.data$ = this.dataService.updates$; } // component.html {{ data$ | async }} Angular Performance Your App at the Speed of Light Async Pipe

Slide 46

Slide 46 text

Detaching from Change Detection Angular Performance Your App at the Speed of Light

Slide 47

Slide 47 text

Detaching Components changeDetector.detach(); changeDetector.reattach(); Angular Performance Your App at the Speed of Light Change Detector AppComponent CD NavComponent CD ContentComponent CD ListComponent CD AppComponent CD NavComponent CD ContentComponent CD ListComponent CD ! View and model can get out of sync!

Slide 48

Slide 48 text

Local Change Detection constructor(cdRef: ChangeDetectorRef) { cdRef.detach(); // detaches this view from the CD tree // cdRef.detectChanges(); // detect this view & children // cdRef.reattach(); } Angular Performance Your App at the Speed of Light Change Detector

Slide 49

Slide 49 text

Findings Reduce amount of change detection cycles - Disable Zone.js (not a good idea in most cases) - Opt-out of NgZone (for operations that should not affect bindings) - Disable Zone.js patches (in case you can’t opt-out, e.g. 3rd party libs) - ChangeDetectionStrategy.OnPush (good default, but be careful) - Local change detection via ChangeDetectorRef (for the few components that do not have to respond to changes from outside) Angular Performance Your App at the Speed of Light Change Detector

Slide 50

Slide 50 text

Runtime Performance 1. Don’t over-optimize 2. Reduce duration of a change detection cycle - Reduce amount of bindings - Avoid binding to (computationally intensive) getters or functions 3. Reduce amount of change detection cycles - Disable zone - NgZone - Zone.js patches - ChangeDetectorRef - ChangeDetectionStrategy Angular Performance Your App at the Speed of Light Cheat Sheet

Slide 51

Slide 51 text

Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com