Why components are the building blocks in Angular - Performance Evidence

Performance: Why components are the building blocks

MEDIUM IMPACT

This concept affects how efficiently the browser renders and updates the UI by managing DOM complexity and reflows.

Building a UI with reusable and maintainable parts

Angular

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

@Component({
  selector: 'app-title',
  template: `<h1>Title</h1>`
})
export class TitleComponent {}

@Component({
  selector: 'app-button',
  template: `<button (click)="clickHandler()">Click</button>`
})
export class ButtonComponent {
  clickHandler() {
    console.log('Clicked');
  }
}

@Component({
  selector: 'app-root',
  template: `<app-title></app-title><p>Paragraph</p><app-button></app-button>`
})
export class AppComponent {}

Splitting UI into components reduces DOM size per component and isolates updates, minimizing reflows.

📈 Performance GainSingle reflow per component update; smaller DOM trees improve rendering and responsiveness.

Building a UI with reusable and maintainable parts

Angular

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

@Component({
  selector: 'app-root',
  template: `<div><h1>Title</h1><p>Paragraph</p><button (click)="clickHandler()">Click</button></div>`
})
export class AppComponent {
  clickHandler() {
    console.log('Clicked');
  }
}

All UI elements are in one big component causing large DOM and frequent reflows on any change.

📉 Performance CostTriggers multiple reflows on any update; large DOM tree slows rendering and interaction.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Single large component	High DOM nodes in one tree	Multiple reflows on any change	High paint cost due to large updates	[X] Bad
Multiple small components	Smaller DOM per component	Single reflow per component update	Lower paint cost with isolated updates	[OK] Good

Rendering Pipeline

Angular components create isolated DOM subtrees. When state changes, only affected components re-render, reducing layout recalculations and paint.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage due to large DOM and frequent updates

Core Web Vital Affected

INP

This concept affects how efficiently the browser renders and updates the UI by managing DOM complexity and reflows.

Optimization Tips

1Break UI into small, reusable Angular components to limit DOM size.

2Update only the components that need changes to reduce reflows.

3Avoid large monolithic components to improve interaction responsiveness.

Performance Quiz - 3 Questions

How do Angular components improve page interaction performance?

A By using inline styles to speed up CSS parsing

B By loading all HTML at once to avoid delays

C By isolating DOM updates to smaller parts, reducing reflows

D By disabling browser caching for fresh content

DevTools: Performance

How to check: Record a performance profile while interacting with the app. Look for layout and paint events and their duration.

What to look for: Long layout times and frequent reflows indicate poor component structure; shorter, isolated updates indicate good performance.