Lifecycle execution order mental model in Angular - Performance & Optimization

Performance: Lifecycle execution order mental model

MEDIUM IMPACT

This concept affects how quickly Angular components initialize and update, impacting the time to interactive and smooth user experience.

Running heavy logic in lifecycle hooks

Angular

ngOnInit() {
  this.scheduleHeavyTask(); // defer heavy work
}
scheduleHeavyTask() {
  if ('requestIdleCallback' in window) {
    requestIdleCallback(() => {
      // heavy computation deferred
    });
  } else {
    setTimeout(() => {
      // heavy computation deferred
    }, 0);
  }
}

Defers heavy work to idle time, allowing initial rendering and interaction to happen faster.

📈 Performance GainReduces blocking time during lifecycle hooks, improving INP by 50-100ms

Running heavy logic in lifecycle hooks

Angular

ngOnInit() {
  for(let i = 0; i < 1000000; i++) {
    // heavy computation
  }
}
ngAfterViewInit() {
  // more heavy DOM manipulation
}

Heavy logic blocks the main thread during component initialization and view rendering, delaying user interaction readiness.

📉 Performance CostBlocks rendering for 100+ ms, causing slow INP and delayed interactivity

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy logic in ngOnInit	Minimal DOM	0	Low	[X] Bad
Heavy logic deferred outside lifecycle hooks	Minimal DOM	0	Low	[OK] Good
Multiple DOM updates in ngOnChanges and ngAfterViewChecked	Multiple DOM updates	2+	High	[X] Bad
Batched DOM updates with requestAnimationFrame	Single DOM update	1	Medium	[OK] Good

Rendering Pipeline

Angular lifecycle hooks run during component initialization and updates, affecting style calculation, layout, and paint stages depending on DOM changes triggered.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout (reflows caused by DOM updates in lifecycle hooks)

Core Web Vital Affected

INP

This concept affects how quickly Angular components initialize and update, impacting the time to interactive and smooth user experience.

Optimization Tips

1Avoid heavy synchronous work inside lifecycle hooks to prevent blocking rendering.

2Batch DOM updates inside lifecycle hooks to minimize reflows and repaints.

3Defer non-critical computations using scheduling APIs to improve input responsiveness.

Performance Quiz - 3 Questions

Which lifecycle hook is best suited for deferring heavy computations to avoid blocking initial rendering?

A ngOnInit with deferred scheduling

B ngAfterViewChecked with immediate execution

C ngOnChanges with synchronous DOM updates

D ngAfterContentInit with blocking loops

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for long tasks during lifecycle hook execution and multiple layout events.

What to look for: Long scripting times blocking main thread and multiple layout/repaint events indicate poor lifecycle hook performance.