Boosting Angular runtime performance

Nir Kaufman
ANGULAR
PERFORMANCE
crash course

Nir Kaufman
@nirkaufman
Google Developer Expert
Worldwide speaker
Community leader

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

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

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;
}

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

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

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

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

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

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

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
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

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

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

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

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

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

[ngModelOptions]="{updateOn:'blur'}

.subscribe( newValue => {
if( newValue !== this.oldValue ) {
this.customEvent.emit(newValue)
}

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

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

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

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

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

DISCOVER LIFE
OUTSIDE THE ZONE

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

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

github.com/demo-projects/ng_poland_performance

DON’T BE AFRAID OF THE SOURCE

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

KEEP IN TOUCH
THANK YOU!
@nirkaufman

Boosting Angular runtime performance

More Related Content

What's hot (20)

Similar to Boosting Angular runtime performance (20)

More from Nir Kaufman (20)

Recently uploaded (20)

Boosting Angular runtime performance