Zone.js and automatic detection in Angular - Performance & Optimization

Performance: Zone.js and automatic detection

MEDIUM IMPACT

This concept affects how Angular detects changes and updates the UI, impacting interaction responsiveness and rendering speed.

Detecting UI changes automatically after async operations

Angular

import { Component, NgZone } from '@angular/core';
@Component({ selector: 'app-root', template: `<button (click)="increment()">Increment</button><p>{{count}}</p>` })
export class AppComponent {
  count = 0;
  constructor(private ngZone: NgZone) {}
  increment() {
    this.ngZone.runOutsideAngular(() => {
      setTimeout(() => {
        this.count++;
        this.ngZone.run(() => {});
      }, 1000);
    });
  }
}

Running async code outside Angular's zone avoids triggering change detection unnecessarily, then manually re-entering zone to update UI only when needed.

📈 Performance GainReduces change detection cycles to only when UI actually needs update, improving input responsiveness.

Detecting UI changes automatically after async operations

Angular

import { Component } from '@angular/core';
@Component({ selector: 'app-root', template: `<button (click)="increment()">Increment</button><p>{{count}}</p>` })
export class AppComponent {
  count = 0;
  increment() {
    setTimeout(() => {
      this.count++;
    }, 1000);
  }
}

Zone.js triggers change detection on every async event like setTimeout, causing Angular to check the whole component tree even if only one value changed.

📉 Performance CostTriggers multiple change detection cycles per async event, increasing CPU work and delaying UI updates.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Automatic detection on every async event	Many unnecessary checks	Multiple reflows if UI updates	High paint cost due to frequent updates	[X] Bad
Manual zone control with runOutsideAngular	Minimal checks only on real changes	Single reflow per update	Lower paint cost with fewer updates	[OK] Good

Rendering Pipeline

Zone.js intercepts async events and triggers Angular's change detection, which runs style recalculations and layout updates if data changed.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckChange Detection causing unnecessary style recalculation and layout

Core Web Vital Affected

INP

This concept affects how Angular detects changes and updates the UI, impacting interaction responsiveness and rendering speed.

Optimization Tips

1Avoid triggering Angular change detection on every async event.

2Use NgZone.runOutsideAngular() for non-UI async tasks.

3Manually trigger change detection only when UI updates are needed.

Performance Quiz - 3 Questions

What is the main performance drawback of Zone.js automatic change detection?

A It blocks the main thread during initial page load

B It triggers change detection on every async event, even if UI doesn't need update

C It increases bundle size by over 1MB

D It causes layout shifts during animations

DevTools: Performance

How to check: Record a performance profile while interacting with the app, then look for frequent 'Change Detection' events and long scripting times.

What to look for: High frequency of change detection cycles and long scripting blocks indicate Zone.js is triggering too often, hurting responsiveness.