Skip to content

Instantly share code, notes, and snippets.

@BioPhoton

BioPhoton/zone-js-referecncs.md

Last active April 15, 2022 12:42
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BioPhoton/090684defbe926f398e8d3d4b0b1f0e1 to your computer and use it in GitHub Desktop.
Save BioPhoton/090684defbe926f398e8d3d4b0b1f0e1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
zone-js-referecncs.md

Docs

Issues

PRs/ Examples

Articles and threads

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
@LayZeeDK
Copy link

I made a typo in:

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

Change comes to becomes.

@LayZeeDK
Copy link

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.

@BioPhoton
Copy link
Author

Very nice example!!

Also thank you sooo much for the input!

@LayZeeDK
Copy link

LayZeeDK commented Feb 3, 2020

angular/angular#31730

@BioPhoton
Copy link
Author

never ending story... 😁

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment