Performance Optimization In Angular 2: 1. High Frequency Problem (tick) 2. High Expressions Problem

2. 1
2

4. UI
(DOM)
Model
<div *ngFor="#todo of todos">
<input [(ngModel)]="todo.done">
<span (click)="setActive(todo)"
[class.done]="todo.done">
{{todo.text}}
</span>
</div>

5. Component
(7 expressions)
Component
(5 expressions)
Component
(9 expressions)
Component
(6 expressions)
Component
(2 expressions)
Component
(3 expressions)
 {{interpolation}}
 [property] = "exp"

6. Component
(7 expressions)
Component
(5 expressions)
Component
(9 expressions)
Component
(6 expressions)
Component
(2 expressions)
Component
(3 expressions)

7. Timer Event
(50ms)
Communication (300ms)
UI Events
(avg 3s)
UI Events
(avg 2s)

9. export class CounterComponent {
value:number = 0;
constructor(private zone:NgZone,
private cd :ChangeDetectorRef){
setInterval( ()=>{ this.value++; } , 50 );
}
}
Ticks
Never use
setInterval method
setInterval( ()=>{ this.value++; } , 50 );
Update

10. export class CounterComponent {
value:number = 0;
constructor(private zone:NgZone,
private cd :ChangeDetectorRef){
run();
}
run(){
this.value++;
setTimeout( ()=> { this.run() } , 50 );
}
}
Create method
every time
Ticks Update
setTimeout( ()=> { this.run() } , 50 );

11. export class CounterComponent {
value : number = 0;
runFnBind : any;
constructor(private zone:NgZone,
private cd :ChangeDetectorRef){
this.runFnBind = this.run.bind(this);
run();
}
run(){
this.value++;
setTimeout( this.runFnBind , 50 );
}
}
Ticks Update
this.runFnBind = this.run.bind(this);
setTimeout( this.runFnBind , 50 );

12. export class CounterComponent {
value : number = 0;
runFnBind : any;
constructor(private zone:NgZone,
private cd :ChangeDetectorRef){
this.runFnBind = this.run.bind(this);
zone.runOutsideAngular( this.runFnBind );
}
run(){
this.value++;
setTimeout( this.runFnBind , 50 );
}
}
Ticks Update
zone.runOutsideAngular( this.runFnBind );

13. export class CounterComponent {
value:number = 0;
constructor(private zone:NgZone,
private cd :ChangeDetectorRef){
zone.runOutsideAngular( this.run.bind(this) );
}
run(){
this.value++;
this.cd.detectChanges();
setTimeout( this.run.bind(this) , 50 );
}
}
Ticks Update
this.cd.detectChanges();

16. Search
Title : {{title}}
Name : {{name}}
Phone : {{phone}}
Mobile : {{mobile}}
Picture: {{picture}}

18. export class MonitorComponent {
...
constructor(private cd :ChangeDetectorRef){
cd.detach();
}
...
set serverLoadValue(val){
let isthreshold = this.checkThreshold(val);
this._serverLoadValue = val;
if(isthreshold){
this.cd.detectChanges();
}
}
}
cd.detach();
this.cd.detectChanges();