3

I'm working on a project where performance is crucial because it's focused in working on mobile devices with few resources.

I ended up verifying that the Angular bind might not be as efficient as I expected, since I imagined that the triggers for checking a field would be through observes them themselves or checking their sets. But it seems that what is monitored for change is the entire context of the application and any changing in any instance of the context (even in isolated components) triggers a check on all the fields of the context, even if the change has no relation to it.

I created an example in plunkr to try to illustrate this behavior.

I have some questions about this behavior:

  • Is this behavior really expected?
  • Is it possible to change this behavior to something more efficient (which does not check everything with each change in context)?
  • It is possible to create some insulation at component level. So that changes in component context do not trigger on checks outside of their own context?
Improve this question
1
  • 1
    Vote -1? Please, what is wrong or unclear in the question? Comment so I can try to improve my question? Commented May 19, 2017 at 12:40

2 Answers 2

Reset to default
3

Angular change detection is extremely efficient, especially if you consider a few things

  • only bind to fields (getters and methods are slower, especially binding to getters or methods that contain non-trivial code is usually a bad idea)
  • use ChangeDetectionStrategy.OnPush wherever possible. It reduces the work change detection does a lot
  • use observables to push changes instead of letting change detection recognize them (especially efficient with OnPush)
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

So, does ChangeDetectionStrategy.OnPush avoid the usage of observers? Does it push the information when ready instead of waiting a listener to receive it by itself? I'll have to dig into this... Seems very interesting and useful!
No, actually the opposite. OnPush depends on (or rather is especially efficient with) observables. It causes change detection only to be run when @Input()s are updated by change detection or when an event is received by event binding like (click)="..." or @HostListener(...), for all other accounts you are responsible yourself to call ChangeDetectorRef.markForCheck() for Angular to run change detection. If you are using the async pipe (like <div>{{someObservable | async}}</div>) then the pipe is calling markForCheck for you.
Thanks a lot! I will definitely study this to understand the whole behavior. Thanks!
@GünterZöchbauer, you could exemplify the use of "ChangeDetectionStrategy.OnPush" and "observables to push changes" in the plunker example for ease of understanding. =D
blog.thoughtram.io/angular/2016/02/22/… ;-)
1

In your Plunker, the text box is the child component.

When a child component has a async event that Angular has hooks in, like onKeyUp, after the event is finished, Angular will run the change detection to make sure nothing is updated in the model, but in order to achieve that, it should start from root of the application to that specific component.

So ,

if you put the input in the parent, the children's change detection won't fire if you use changeDetection:ChangeDetectionStrategy.OnPush on it.

Improve this answer

1 Comment

I read some articles on ChangeDetectionStrategy.OnPush, but I think I have something I did not understand, could you explain how to use this feature in this example in plunker?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.