Embed Size (px)
Citation preview
Performance OptimizationIn Angular 2
Eyal Vardi
Site: http://ng-course.org
Blog: eyalVardi.wordpress.com
Angular 2 is 5 x faster than Angular
1
1
2
Line of Code by Years
1M
50k
10k
1k
100k
500k
site ajax spa Web app CompositeWeb app
HTML Template binding
Application needs m
ore and more speed !!!LOC
Year
Model Challenges
UI(DOM) Model
<div *ngFor="#todo of todos">
<input
[(ngModel)]="todo.done">
<span
(click)="setActive(todo)"
[class.done]="todo.done">
{{todo.text}}
</span>
</div> Template
?
Angular 2.0 Tick Cycle
Component(7
expressions)Compone
nt(5
expressions)Compone
nt(9
expressions)
Component(6
expressions)
Component(2
expressions)
Component(3
expressions)
NgZoneCommunication,Timers, UI Events
Tim
e
Screen Update
{{interpolation}} [property] = "exp"
Performance Formula
Freq x Qexp = SpeedCompone
nt(7
expressions)
Component(5
expressions)
Component(9
expressions)
Component(6
expressions)
Component(2
expressions)
Component(3
expressions)
Timer Event(50ms)
Async Events With Zone.js
Communication (300ms)
UI Events(avg 3s)
UI Events(avg 2s)
High Frequency Problem
Timer Problemexport 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
Timer Problemexport 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 );
Timer Problemexport 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 );
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 ); }}
Timer Problem Ticks Update
zone.runOutsideAngular( this.runFnBind );
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 ); }}
Timer Problem Ticks Update
this.cd.detectChanges();
Counter
High Expressions Problem
SearchName:
Title : {{title}}Name : {{name}}Phone : {{phone}}Mobile : {{mobile}}Picture: {{picture}}
On Push Strategy
Mr. Angular 2
Email : [email protected] Phone: 0545-676-200
Mr. HTML 5
Email : [email protected] Phone: 0545-123-200
Email : [email protected] Phone: 0545-123-321
Mr. CSS 3
Email : [email protected] Phone: 0545-123-321
Mr. JavaScript
Email :[email protected] Phone: 0545-767-300
Mr. Eyal Vardi
Items x 5 expressions
(every ticks)
On Push Strategy
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(); } }}
On Dirty Strategy
cd.detach();
this.cd.detectChanges();
On Dirty Strategy
Detached
Check Always
On Push
On Dirty
NgZone
Freq x Qexp = Speed
Summary
Resources My code My powerpoint
Thankseyalvardi.wordpress.com
Eyal Vardi
http://ng-course.org
eyalVardi.wordpress.co
m
Eyal Vardi
Site: http://ng-course.org
Blog: eyalVardi.wordpress.com
