Collapse component in Bootsrap - Performance & Optimization

Performance: Collapse component

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by controlling how content is shown or hidden dynamically.

Toggling visibility of content sections on user interaction

Bootsrap

<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Toggle</button>
<div class="collapse" id="collapseExample">Content here</div>

Bootstrap's collapse uses CSS transitions and optimized class toggling to minimize layout recalculations.

📈 Performance GainTriggers 1 reflow per toggle, improving interaction speed and reducing layout thrashing

Toggling visibility of content sections on user interaction

Bootsrap

<div id="content">Content here</div>
<button onclick="document.getElementById('content').style.display = (document.getElementById('content').style.display === 'none' ? 'block' : 'none')">Toggle</button>

Directly changing style.display causes layout thrashing and triggers multiple reflows on each toggle.

📉 Performance CostTriggers 2 reflows per toggle, causing slower interaction responsiveness

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct style.display toggle	Minimal DOM changes	2 reflows per toggle	Medium paint cost	[X] Bad
Bootstrap collapse with class toggle	Minimal DOM changes	1 reflow per toggle	Low paint cost	[OK] Good

Rendering Pipeline

When toggling collapse, the browser recalculates styles and layouts only for the affected element and its children, then paints the updated area.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage is most expensive due to height changes triggering reflows.

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness by controlling how content is shown or hidden dynamically.

Optimization Tips

1Avoid directly changing style properties that trigger layout thrashing.

2Use CSS class toggling with transitions to minimize reflows.

3Test toggling performance with browser DevTools Performance panel.

Performance Quiz - 3 Questions

What is the main performance benefit of using Bootstrap's collapse component over manually toggling style.display?

A It blocks rendering until the toggle finishes.

B It increases the number of DOM nodes for better structure.

C It reduces the number of layout recalculations (reflows) during toggling.

D It adds extra JavaScript to slow down toggling.

DevTools: Performance

How to check: Record a performance profile while toggling the collapse component. Look for layout and paint events in the flame chart.

What to look for: Fewer layout recalculations and shorter paint times indicate better performance.