Skip to content

Comments

fix: reduce change detections#622

Open
arturovt wants to merge 1 commit intojfcere:masterfrom
arturovt:fix/reduce-change-detections
Open

fix: reduce change detections#622
arturovt wants to merge 1 commit intojfcere:masterfrom
arturovt:fix/reduce-change-detections

Conversation

@arturovt
Copy link
Contributor

Reduced Angular change detection triggers from ~5+ per HTTP request down to 1 (or 0 if no observers).

Key optimizations:

  • Wrapped HttpClient calls in runOutsideAngular() to prevent zone.js from triggering CD on XHR progress events (send, download, load, etc.)
  • Re-enter Angular zone with ngZone.run() only when emitting to @output() with active observers
  • Added AbortController to make async render operations cancellable (Promises are not cancellable by default in JavaScript)
  • Used switchMap to automatically cancel stale in-flight requests when src changes rapidly

Performance impact:

  • Before: HTTP request triggers 5+ CD cycles (one per XHR event)
  • After: HTTP request triggers 1 CD cycle (only on final emission, and only if observers exist)

Note: Also updated demo app during debugging session. The demo had scroll event handlers triggering redundant change detections, which made it harder to profile the markdown component's actual CD behavior. These demo changes aren't strictly necessary for the optimization but were helpful for accurate performance measurement.

Reduced Angular change detection triggers from ~5+ per HTTP request down to 1 (or 0 if no observers).

Key optimizations:
- Wrapped HttpClient calls in `runOutsideAngular()` to prevent zone.js from triggering CD on XHR progress events (send, download, load, etc.)
- Re-enter Angular zone with `ngZone.run()` only when emitting to @output() with active observers
- Added AbortController to make async render operations cancellable (Promises are not cancellable by default in JavaScript)
- Used switchMap to automatically cancel stale in-flight requests when src changes rapidly

Performance impact:
- Before: HTTP request triggers 5+ CD cycles (one per XHR event)
- After: HTTP request triggers 1 CD cycle (only on final emission, and only if observers exist)

---

Note: Also updated demo app during debugging session. The demo had scroll event handlers triggering redundant change detections, which made it harder to profile the markdown component's actual CD behavior. These demo changes aren't strictly necessary for the optimization but were helpful for accurate performance measurement.
@arturovt
Copy link
Contributor Author

@jfcere please note that some formatting changes have been done automatically, I was trying to revert them, but they're still being formatted once I click save.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant