zone-js-referecncs.md

Docs

• https://hackmd.io/@mhevery/BkDUxaW84/https%3A%2F%2Fhackmd.io%2Fc%2FBkDUxaW84%2Fedit%3Fedit?type=book

Issues

• angular/angular#32103
• https://www.reddit.com/r/angular/comments/bxigkb/zonejs_performance_issues_in_angular_hybrid/

PRs/ Examples

• https://github.com/angular/angular/pull/30533/files#diff-9d549aa403494fd043a146b8db64f503R264-R275
• https://stackblitz.com/edit/angular-zone-rxjs-patch-test?file=src%2Fpolyfills.ts

Articles and threads

• https://blog.bitsrc.io/quantum-angular-maximizing-performance-by-removing-zone-e0eefe85b8d8
• https://medium.com/angular-in-depth/boosting-performance-of-angular-applications-with-manual-change-detection-42cb396110fb

Pros

• nearly no thoughts on when to update the view

Cons

• manual change detection

== TO ORGANIZE ======================

If we output an ES2017 bundle, we will have native async-await which can't be monkey patched by zone.js. The ~35-40 KB additional bundle. Additional runtime overhead on all asynchronous tasks.

NgZone: Every event handler triggers a change detection cycle, for example clicks to navigate or open a dialog or sidebar which doesn't change any state (other than URL and router state). Again, a major runtime overhead (performance hit).

If we combine this with the default change detection strategy (CheckAlways), this comes a bigger and bigger issue as the application grows. It's maintained by a single man (albeit a very talented man).

Event Coalescing The whole story is,

1. there are some performance issue in Angular material, and this issue is discussed in the Angular team.
2. Then Misko has an idea to use async change detection to improve the performance. And he write a design doc here https://hackmd.io/wXsFRwBJRSOUu03fdCPi1w
3. Because this idea involves Zone and event listener, so Jia just volunteer to enhance the design and help to implement. angular/angular#29610

I made a typo in:

(...) this comes a bigger and bigger issue (...)

Change comes to becomes.

I have been part of developing an application which had very few state changes (one data update per 5 minutes at the most). However, it had many active components at the same time and a lot of navigation between different pages. Every click to navigate triggered dirty checking on every binding in all active components because we used the default change detection strategy and NgZone. The performance quickly became terrible, despite state change almost exclusively occurring in URL state and router state. We "solved" it by excluding click bindings from NgZone which forced us to trigger change detection manually in a few cases.

Very nice example!!

Also thank you sooo much for the input!

angular/angular#31730

never ending story... 😁