Menu
I have a complex component with many @Input() and async process. I want to optimize the component, thus intend to analyze Angular4 change detection cycle upon my component.
May I know how to identify if the Angular4 change detection system is being triggered, and the DOM is being re-rendered?
Probably, using console.log(...)?
Typically, I hope for something like (in browser console):
Change-detection running... no changes... 1
Change-detection running... no changes... 2
Change-detection running... no changes... 3
Change-detection running... no changes... 4
Change-detection running... changed
No DOM rendering
Change-detection running... no changes... 5
Change-detection running... no changes... 6
Change-detection running... changed
DOM re-rendered
Change-detection running... no changes... 7
Change-detection running... no changes... 8
How do I achieve this? Or how do you guy optimize the Angular4 performance? Any other approaches?
464
An observable notices a mutation in the object without creating a new reference for it. So, you can subscribe to an observable, and, whenever a change happens, manually run the change detector inside the subscribe method to update the view.
Angular runs its change detection mechanism periodically so that changes to the data model are reflected in an application's view. Change detection can be triggered either manually or through an asynchronous event (for example, a user interaction or an XMLHttpRequest completion).
Your first call of detectChanges() is NgOninit , your second call of detectChanges() updates the view and initiates data binding . Your additional example illustrates this fact. The first call to detectChanges() which does call NgOnInit is in line 27 (first example) and line 37 (second example) in the beforeEach block.
detectChanges — When you call this method on changeDetectorRef provider, it will run change detection from the current component and all it's descendants. While running change detection it keeps the change detection strategy in mind. tick — The tick method applicable on ApplicationRef API.
i wanted to do the same but there is no lifecycle hook which can do that, so i did a hack, may be that will help you as well.
on any tag in the html template invoke a function and log on console when the function is executed. Whenever the change detection will be executed, the template will get re-evaluated resulting in the function invocation. That worked pretty well for me to analyze what's going
.html
<div>{{doNothing()}}</div>
.ts
doNothing() {
console.log('template evaluated');
}
If you have a ngFor in your template you can add trackBy. This will get called every time change detection triggers (https://angular.io/api/common/NgForOf#change-propagation) and you can log out a statement. You can then set a breakpoint on the function and look at stack trace to see where change events are originating.
I stumbled across this method while trying to debug an issue that would crash the browser due to change detection getting constantly triggered.
template
<div *ngFor="let things of things; trackBy: trackThings"></div>
component
trackThings(index, thing) {
console.log(index, question)
return thing ? index : undefined;
}
Track by also improves performance: https://medium.com/@ramy_ali/improving-angular-ngfor-performance-through-trackby-ae4cf943b878
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
