Performance Optimization In Angular 2
-
Upload
eyal-vardi -
Category
Software
-
view
609 -
download
4
Transcript of Performance Optimization In Angular 2
![Page 1: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/1.jpg)
Performance OptimizationIn Angular 2
Eyal Vardi
Site: http://ng-course.org
Blog: eyalVardi.wordpress.com
![Page 2: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/2.jpg)
Angular 2 is 5 x faster than Angular
1
1
2
![Page 3: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/3.jpg)
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
![Page 4: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/4.jpg)
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
?
![Page 5: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/5.jpg)
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"
![Page 6: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/6.jpg)
Performance Formula
Freq x Qexp = SpeedCompone
nt(7
expressions)
Component(5
expressions)
Component(9
expressions)
Component(6
expressions)
Component(2
expressions)
Component(3
expressions)
![Page 7: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/7.jpg)
Timer Event(50ms)
Async Events With Zone.js
Communication (300ms)
UI Events(avg 3s)
UI Events(avg 2s)
![Page 8: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/8.jpg)
High Frequency Problem
![Page 9: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/9.jpg)
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
![Page 10: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/10.jpg)
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 );
![Page 11: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/11.jpg)
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 );
![Page 12: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/12.jpg)
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 );
![Page 13: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/13.jpg)
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();
![Page 14: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/14.jpg)
Counter
![Page 15: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/15.jpg)
High Expressions Problem
![Page 16: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/16.jpg)
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)
![Page 17: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/17.jpg)
On Push Strategy
![Page 18: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/18.jpg)
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();
![Page 19: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/19.jpg)
On Dirty Strategy
![Page 20: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/20.jpg)
Detached
Check Always
On Push
On Dirty
NgZone
Freq x Qexp = Speed
Summary
![Page 21: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/21.jpg)
Resources My code My powerpoint
![Page 22: Performance Optimization In Angular 2](https://reader036.fdocuments.us/reader036/viewer/2022062523/5872b30c1a28ab523c8b5ebf/html5/thumbnails/22.jpg)
Thankseyalvardi.wordpress.com
Eyal Vardi
http://ng-course.org
eyalVardi.wordpress.co
m
Eyal Vardi
Site: http://ng-course.org
Blog: eyalVardi.wordpress.com