Slides for my "Boosting Angular Performance" talk, showing some practical tips that can improve the runtime performance of your Angular application.

1. Nir Kaufman
ANGULAR
PERFORMANCE
crash course

2. Nir Kaufman
@nirkaufman
Google Developer Expert
Worldwide speaker
Community leader

3. Tel Aviv • New York

5. LEARN
THE BASICS

6. RENDERING TIME
Change Detection Browser Rendering
Events Handlers Data bindings
Total Rendering Time
Trigger DOM updates

7. 2 PHASES OF CHANGE DETECTION

8. Property checks and DOM updates
are performed on Views.
ANGULAR VIEWS
linker/view_ref.ts

9. export interface ViewData {
def: ViewDefinition;
root: RootData;
renderer: Renderer2;
parentNodeDef: NodeDef|null;
parent: ViewData|null;
viewContainerParent: ViewData|null;
component: any;
context: any;
nodes: {[key: number]: NodeData};
state: ViewState;
oldValues: any[];
disposables: DisposableFn[]|null;
}

10. export interface ViewData {
def: ViewDefinition;
root: RootData;
renderer: Renderer2;
parentNodeDef: NodeDef|null;
parent: ViewData|null;
viewContainerParent: ViewData|null;
component: any;
context: any;
nodes: {[key: number]: NodeData};
state: ViewState;
oldValues: any[];
disposables: DisposableFn[]|null;
}

11. class ViewRef extends ChangeDetectorRef
REFERENCE TO THE VIEW
constructor(cdr:ChangeDetectorRef) {
// refer to this component view
}

12. abstract class ChangeDetectorRef {
abstract checkNoChanges(): void;
abstract detach() : void;
abstract detectChanges() : void;
abstract markForCheck() : void;
abstract reattach() : void;
}
CHANGE DETECTOR

13. abstract class ChangeDetectorRef {
abstract checkNoChanges(): void;
abstract detach() : void;
abstract detectChanges() : void;
abstract markForCheck() : void;
abstract reattach() : void;
}
CHANGE DETECTOR

14. Run change detection once
for the current component
and all its children.
DETECT CHANGES

15. Run change detection once
for the current component
and all its children.
DETECT CHANGES

16. tick(): void {
...
try {
this._runningTick = true;
this._views.forEach((view) =>
view.detectChanges());
…
}
appilcation_ref.ts
DETECT CHANGES

17. this._zone.onMicrotaskEmpty.subscribe({
next: () => {
this._zone.run(() => {
this.tick();
});
}
});
DETECT CHANGES

18. this._zone.onMicrotaskEmpty.subscribe({
next: () => {
this._zone.run(() => {
this.tick();
});
}
});
DETECT CHANGES

19. Trigger change detection
as a result of async
operations.
NG ZONE

20. NG ZONE
export class NgZone {
private outer: Zone;
private inner: Zone;
constructor({enableLongStackTrace = false}) {
if (typeof Zone == 'undefined') {
throw new Error('Angular requires Zone.js prolyfill.');
}
}
}

21. NG ZONE
export class NgZone {
private outer: Zone;
private inner: Zone;
constructor({enableLongStackTrace = false}) {
if (typeof Zone == 'undefined') {
throw new Error('Angular requires Zone.js prolyfill.');
}
}
}

23. NG ZONE
export class NgZone {
private outer: Zone;
private inner: Zone;
constructor({enableLongStackTrace = false}) {
if (typeof Zone == 'undefined') {
throw new Error('Angular requires Zone.js prolyfill.');
}
}
}
ng_zone.ts

24. RENDERING TIME
Change Detection Browser Rendering
Events Handlers Data bindings
Total Rendering Time
Trigger DOM updates

25. OUR GOAL
Reducing CD executions.
Reducing the execution time.
Controlling the CD flow.

26. OPTIMIZE
YOUR CALLBACKS

27. All events handlers
must complete
Before change detection
can continue.
OPTIMIZING CALLBACKS

28. All events handlers
must complete
Before change detection
can continue.
OPTIMIZING CALLBACKS

29. Return fast from callbacks.
Use of input setters instead onChanges.
Prevent unnecessary callbacks.
Prefer pure pipes.
Cache wherever you can.
THE CALLBACK CHECKLIST

30. RETURN FAST.

31. USE INPUT SETTERS
@Input() set value (value: any) {
// executed on this input change
}
ngOnChanges(changes: SimpleChanges){
// executed on any input change
}

32. PREVENT UNNECESSARY CALLBACKS
this.control
.valueChanges
.debounceTime(350)
.subscribe(...);

33. PREVENT UNNECESSARY CALLBACKS
[ngModelOptions]="{updateOn:'blur'}

34. PREVENT UNNECESSARY CALLBACKS
.subscribe( newValue => {
if( newValue !== this.oldValue ) {
this.customEvent.emit(newValue)
}

35. PREFER PURE PIPES
[users]="showActiveUsers()"
[users]="users | showActive"
Each CD
Only if users changes

36. CACHE CALLBACK RESULTS
@memoize()
calculateCode(nat, gender) {
// return user code
}

37. OPTIMIZE
CHANGE DETECTION

38. THE CHECKLIST
Use onPush when possible
Exclude components from CD
Implement your own CD logic

40. class ChangeDetectorRef {
checkNoChanges()
detach()
detectChanges()
markForCheck()
reattach()
}
CHANGE DETECTION

41. @Input() items;
constructor(
private cdr: ChangeDetectorRef){}
ngOnInit(){
this.cdr.detach();
}
ngOnChanges(changes: SimpleChanges) {
this.cdr.detectChanges();
}
TAKE CONTROL

42. DISCOVER LIFE
OUTSIDE THE ZONE

43. OUTSIDE THE ZONE
constructor(private zone: NgZone ) {
zone.runOutsideAngular()
}

44. GOING MANUAL
platformBrowserDynamic()
.bootstrapModule(AppModule, {
ngZone: 'noop'
})

45. NEXT STEPS
CHOOSE YOUR PATH

46. github.com/demo-projects/ng_poland_performance

47. DON’T BE AFRAID OF THE SOURCE

48. READ THIS BLOG
https://blog.angularindepth.com/

49. KEEP IN TOUCH
THANK YOU!
@nirkaufman