Downloaded 48 times
![UI (DOM) Model <div *ngFor="#todo of todos"> <input [(ngModel)]="todo.done"> <span (click)="setActive(todo)" [class.done]="todo.done"> {{todo.text}} </span> </div>](https://image.slidesharecdn.com/performanceoptimization-161117050220/75/Performance-Optimization-In-Angular-2-4-2048.jpg)
![Component (7 expressions) Component (5 expressions) Component (9 expressions) Component (6 expressions) Component (2 expressions) Component (3 expressions) {{interpolation}} [property] = "exp"](https://image.slidesharecdn.com/performanceoptimization-161117050220/75/Performance-Optimization-In-Angular-2-5-2048.jpg)
Uploaded byEyal Vardi
Performance Optimization In Angular 2
The document discusses various Angular component implementations, specifically focusing on managing component state and performance through techniques such as setInterval, setTimeout, and ChangeDetectorRef. It emphasizes the importance of using methods like zone.runOutsideAngular to optimize performance and ensure efficient updates in the UI. Additionally, there are examples illustrating how to manage server load values and handle change detection.
Performance Optimization In Angular 2
- 2.
- 4. UI (DOM) Model <div *ngFor="#todo oftodos"> <input [(ngModel)]="todo.done"> <span (click)="setActive(todo)" [class.done]="todo.done"> {{todo.text}} </span> </div>
- 5. Component (7 expressions) Component (5 expressions) Component (9expressions) Component (6 expressions) Component (2 expressions) Component (3 expressions) {{interpolation}} [property] = "exp"
- 6. Component (7 expressions) Component (5 expressions) Component (9expressions) Component (6 expressions) Component (2 expressions) Component (3 expressions)
- 7. Timer Event (50ms) Communication (300ms) UIEvents (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();