Angular performace - OnPush increases num of cycles

3
votes

im trying to measure the performance differences in change detection strategies.

i've added the angular profiler, and checked with Default and then added onPush to most of our components and these are the results: (development mode)

Default: { msPerTick: 25+-, numTicks: 18+- } onPush: { msPerTick: 2+-, numTicks 220+- }

as you can see the msPerTick has reduced significantly, but the number of cycles is 10 times bigger. the more components i change to onPush, so the ms reduces and numTicks increases.

i want to know if it's ok and normal, and if not what can cause that?

Extra details: angular 7, im using lazy load modules(with routing). app.component is on default strategy. im checking it on the biggest module. big.module has big.home component (default) with child components (onPush)

1
angularangular7angular2-changedetectionangular-changedetection
How in particular did you get those ticks? – Jacopo Sciampi
@JacopoSciampi I'm not sure how to check the ticks, but the app is calling API every 5 seconds which changes the state (redux) – Ori Damari
Alright, I understand. Changing the strategy to OnPush doesn't remove the component to the Angular's tree render list, it just doesn't update it everytime there's a change. Calling the API every five seconds is triggering the Angular's rendered to notify all those components. Using OnPush and injecting ngZone into the component you can use ngZone.runoutsideangular(...) function to actually detach the component to the angular's tree component list and so you have full control on how and when updating the component. Hence the performances should increase even more. – Jacopo Sciampi
@JacopoSciampi Ok, Ill check that also. but any idea why the numTicks increased so much ? – Ori Damari

1 Answers

2
votes

Update: i figured it out, the timeChangeDetection function runs for half a second and tries to do as many cycles as it can. so the wanted situation it as many numTicks as possible.