Angular(2~5)为何比AngularJS快？其变更检测机制解析

Great question—this is one of the biggest leaps Angular made over AngularJS, and you’ve already hit on most of the key pieces! Let’s unpack how it all works together.

First off: Angular does NOT have a digest cycle like AngularJS. That’s one of the core reasons it’s so much more performant. AngularJS’s digest loop would repeatedly run through all watchers until no more changes were detected—this could lead to multiple cycles, performance bottlenecks in large apps, and even infinite loops if you weren’t careful with your watchers.

Angular replaces this with a far more targeted, efficient system. Let’s break down how it works, using the features you mentioned:

How Angular Detects Changes Without a Digest Cycle #

The foundation of Angular’s change detection is Zone.js, but it’s paired with several other tools to keep things fast:

1. Zone.js: The "Async Watchdog" #

Zone.js uses monkey-patching to wrap almost every asynchronous API in the browser (think click events, setTimeout, HTTP requests, WebSocket messages, etc.). When any of these async operations complete, Zone.js signals Angular that something might have changed in the application state.

Instead of you having to manually call $apply() like in AngularJS, Zone.js automatically triggers change detection for you. This ensures that changes from user interactions, network responses, or timers are always reflected in the UI—without the overhead of a full digest loop.

2. Unidirectional Component Tree & Change Detection Flow #

Angular’s component hierarchy is a unidirectional tree. By default, change detection runs top-down from the root component to all child components. This one-way flow avoids the circular checks that plagued AngularJS’s two-way binding.

Each component has its own change detector, so Angular can isolate checks to specific parts of the tree if needed—no more scanning every watcher in the entire app unless it’s necessary.

3. Change Detection Strategies: Opt-In Performance #

Angular gives you control over when a component’s change detector runs via ChangeDetectionStrategy:

• Default: The component checks for changes every time Zone.js triggers a detection cycle (this is the out-of-the-box behavior, similar to AngularJS but more efficient).
• OnPush: This is where the real performance gains happen. With OnPush, the component only runs change detection if:
  • One of its @Input() properties has a new reference (not just a property change on an existing object/array).
  • The component emits an event (like a button click inside the component).
  • You manually trigger detection with detectChanges() or markForCheck().
  • An observable subscribed to via the async pipe emits a new value.

This means you can skip unnecessary checks for components that don’t need updating—critical for large apps with hundreds of components.

4. ImmutableJS: Simplify Reference Checks #

ImmutableJS pairs perfectly with OnPush strategy. Since ImmutableJS data structures are immutable (you can’t modify them—any change returns a new structure), you get automatic reference changes whenever data updates.

For example, instead of mutating an array like myArray.push(newItem), you’d create a new array with myArray = myArray.concat(newItem) (or use ImmutableJS’s built-in methods). This new reference triggers change detection for OnPush components, without Angular having to do expensive deep comparisons of objects.

5. RxJS: Reactive State Management #

Angular’s deep integration with RxJS helps streamline change detection too:

• The async pipe automatically handles subscribing to observables and marking the component for check when a new value is emitted—no manual cleanup or change detection triggers needed.
• You can use RxJS to manage application state (e.g., with BehaviorSubject), ensuring that state changes are propagated predictably. When a subject emits a new value, components subscribed to it update, and OnPush components will detect the change if the state is immutable.

Wrapping Up #

Angular eliminates the inefficient digest cycle by combining:

• Automatic async event detection via Zone.js
• A unidirectional, component-based change detection flow
• Opt-in performance with OnPush strategy
• Immutable data to simplify change checks
• Reactive state management with RxJS

This system ensures that change detection runs only when necessary, targeting specific components instead of scanning the entire app repeatedly—making it far more efficient than AngularJS’s approach.

内容的提问来源于stack exchange，提问作者Deng Zhebin