Badge component in Bootsrap - Performance & Optimization

Performance: Badge component

LOW IMPACT

Badge components affect page load speed and rendering performance by adding extra DOM elements and CSS styles that can trigger layout and paint operations.

Displaying notification counts with badges

Bootsrap

<span class="badge bg-primary">99+ New</span>

Combining text into a single badge reduces DOM nodes and paint areas.

📈 Performance Gainsingle paint operation and smaller DOM

Displaying notification counts with badges

Bootsrap

<span class="badge bg-primary">99+</span><span class="badge bg-danger">New</span>

Using multiple badge elements increases DOM nodes and CSS paint areas unnecessarily.

📉 Performance Costtriggers 2 paint operations and increases DOM size

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multiple badges for related info	More nodes	Multiple reflows if updated separately	Multiple paints	[X] Bad
Single combined badge	Fewer nodes	Single reflow	Single paint	[OK] Good
Frequent badge text updates without batching	Same nodes	Many reflows	Many paints	[X] Bad
Batched badge updates with debounce	Same nodes	Few reflows	Few paints	[OK] Good

Rendering Pipeline

Badge components add styled inline elements that require style calculation, layout, and paint stages in the browser rendering pipeline.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckPaint stage due to background color and border-radius styles

Core Web Vital Affected

LCP

Badge components affect page load speed and rendering performance by adding extra DOM elements and CSS styles that can trigger layout and paint operations.

Optimization Tips

1Use as few badge elements as possible by combining related info.

2Avoid frequent badge text updates; batch them to reduce reflows and paints.

3Keep badge styles simple to minimize paint cost.

Performance Quiz - 3 Questions

What is a performance downside of using many separate badge elements for related info?

A Increases DOM size and triggers multiple paint operations

B Reduces CSS complexity

C Improves page load speed

D Decreases reflows

DevTools: Performance

How to check: Open DevTools > Performance tab > Record while interacting with badges or updating them > Look for layout and paint events

What to look for: High frequency of Layout and Paint events indicates inefficient badge updates