0
0
Bootsrapmarkup~8 mins

Badge component in Bootsrap - Performance & Optimization

Choose your learning style9 modes available
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
PatternDOM OperationsReflowsPaint CostVerdict
Multiple badges for related infoMore nodesMultiple reflows if updated separatelyMultiple paints[X] Bad
Single combined badgeFewer nodesSingle reflowSingle paint[OK] Good
Frequent badge text updates without batchingSame nodesMany reflowsMany paints[X] Bad
Batched badge updates with debounceSame nodesFew reflowsFew 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
Test your performance knowledge
What is a performance downside of using many separate badge elements for related info?
AIncreases DOM size and triggers multiple paint operations
BReduces CSS complexity
CImproves page load speed
DDecreases 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