ngOnInit for initialization in Angular - Performance & Optimization

Performance: ngOnInit for initialization

MEDIUM IMPACT

This affects the initial rendering speed and responsiveness by controlling when component initialization logic runs.

Running initialization logic in Angular components

Angular

import { OnInit } from '@angular/core';

export class MyComponent implements OnInit {
  ngOnInit() {
    this.loadData();
  }
  loadData() {
    // heavy synchronous logic
  }
}

Initialization runs after Angular sets inputs but before rendering starts, allowing faster initial paint.

📈 Performance GainReduces blocking time during component creation, improving LCP by 100-300ms.

Running initialization logic in Angular components

Angular

export class MyComponent {
  constructor() {
    this.loadData();
  }
  loadData() {
    // heavy synchronous logic
  }
}

Running heavy logic in the constructor blocks component creation and delays rendering.

📉 Performance CostBlocks rendering until constructor finishes, increasing LCP by 100-300ms depending on logic.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Initialization in constructor	Immediate heavy DOM changes	Multiple reflows if DOM updated synchronously	High paint cost delaying first paint	[X] Bad
Initialization in ngOnInit	DOM changes after inputs set	Single reflow after initialization	Lower paint cost, faster first paint	[OK] Good

Rendering Pipeline

Angular creates the component instance, then calls ngOnInit after inputs are set but before first render. Initialization logic here affects style calculation and layout if it changes DOM or styles.

→Component Creation

→Style Calculation

→Layout

→Paint

⚠️ BottleneckComponent Creation and Layout stages if initialization is heavy or synchronous.

Core Web Vital Affected

LCP

This affects the initial rendering speed and responsiveness by controlling when component initialization logic runs.

Optimization Tips

1Avoid heavy synchronous logic in the constructor to prevent blocking rendering.

2Use ngOnInit to run initialization after inputs are set for better render timing.

3Defer heavy or async tasks to after ngOnInit to keep initial paint fast.

Performance Quiz - 3 Questions

Why is it better to put initialization logic in ngOnInit instead of the constructor?

A Because ngOnInit runs before the component is created.

B Because ngOnInit runs after inputs are set and does not block initial rendering.

C Because constructor runs asynchronously and delays rendering.

D Because constructor cannot access component inputs.

DevTools: Performance

How to check: Record a performance profile while loading the component. Look for long tasks during component creation and ngOnInit.

What to look for: Long blocking tasks in constructor indicate bad pattern; shorter tasks after component creation indicate good pattern.