Component-based framework philosophy in Bootsrap - Performance & Optimization

Performance: Component-based framework philosophy

MEDIUM IMPACT

This affects how quickly the page loads and updates by controlling how UI parts are built and reused.

Building a UI with reusable parts

Bootsrap

<template id="header-template"><div>Header</div></template><script>const template = document.getElementById('header-template'); document.body.appendChild(template.content.cloneNode(true)); document.body.appendChild(template.content.cloneNode(true));</script>

Reuses a single template to create multiple headers, reducing DOM size and duplication.

📈 Performance GainSingle reflow for template cloning, smaller DOM, faster updates

Building a UI with reusable parts

Bootsrap

<div>Header</div><div>Header</div><div>Header</div>

Repeating the same HTML multiple times increases DOM size and slows rendering.

📉 Performance CostTriggers multiple reflows and increases initial load time

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated HTML blocks	High (many nodes)	Multiple reflows	High paint cost	[X] Bad
Component reuse with templates	Low (fewer nodes)	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

Components break UI into smaller parts that the browser can update independently, reducing full page re-layouts.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage when many DOM nodes change

Core Web Vital Affected

INP

This affects how quickly the page loads and updates by controlling how UI parts are built and reused.

Optimization Tips

1Use components to limit how much of the DOM changes at once.

2Avoid repeating large blocks of HTML; reuse templates or components.

3Smaller, isolated DOM updates improve interaction responsiveness.

Performance Quiz - 3 Questions

How does using components affect page interaction performance?

A It blocks the main thread for longer

B It increases the number of DOM nodes and slows rendering

C It reduces DOM updates and speeds up rendering

D It has no effect on performance

DevTools: Performance

How to check: Record a performance profile while interacting with the page. Look for long layout or paint times caused by repeated DOM updates.

What to look for: High layout or paint times indicate inefficient DOM updates; component reuse reduces these.