Horizontal collapse in Bootsrap - Performance & Optimization

Performance: Horizontal collapse

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by controlling how content is shown or hidden horizontally, impacting layout recalculations and repaints.

Toggling horizontal collapse on a large content area

Bootsrap

<div class="collapse horizontal" id="collapseExample">
  <div class="card card-body">Large content here</div>
</div>
<script>
document.getElementById('toggleBtn').addEventListener('click', () => {
  const el = document.getElementById('collapseExample');
  if (el.style.width === '0px' || !el.style.width) {
    el.style.width = '300px';
  } else {
    el.style.width = '0px';
  }
});
</script>

Using inline width style changes with CSS transitions limits layout recalculations to width only, reducing reflows and improving animation smoothness.

📈 Performance GainTriggers 1 reflow per toggle, smoother animation, interaction blocks reduced to under 20ms

Toggling horizontal collapse on a large content area

Bootsrap

<div class="collapse horizontal show" id="collapseExample">
  <div class="card card-body">Large content here</div>
</div>
<script>
document.getElementById('toggleBtn').addEventListener('click', () => {
  const el = document.getElementById('collapseExample');
  el.classList.toggle('show');
});
</script>

Toggling the 'show' class triggers layout recalculations and repaints for the entire wide content, causing multiple reflows and slower interaction.

📉 Performance CostTriggers 2-3 reflows per toggle on large content, blocking interaction for 50-100ms depending on content size

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Toggle 'show' class on wide collapse	Minimal DOM ops	2-3 reflows per toggle	High paint cost due to width change	[X] Bad
Animate width with inline styles and transitions	Minimal DOM ops	1 reflow per toggle	Lower paint cost, smoother animation	[OK] Good

Rendering Pipeline

Horizontal collapse toggling affects the Layout and Paint stages by changing element width and visibility, causing the browser to recalculate positions and redraw affected areas.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout recalculation is the most expensive due to width changes affecting sibling elements.

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness by controlling how content is shown or hidden horizontally, impacting layout recalculations and repaints.

Optimization Tips

1Avoid toggling width or display properties that cause layout recalculations.

2Use CSS transitions on transform or opacity for smoother horizontal collapse animations.

3Limit the size of content inside horizontal collapse to reduce reflow cost.

Performance Quiz - 3 Questions

What is the main performance cost when toggling a horizontal collapse using the 'show' class in Bootstrap?

A Multiple layout recalculations and repaints

B Increased network requests

C JavaScript parsing delay

D Image decoding time

DevTools: Performance

How to check: Record a performance profile while toggling the horizontal collapse. Look for Layout and Recalculate Style events in the flame chart.

What to look for: High number or long duration of Layout events indicates costly reflows; fewer and shorter Layout events mean better performance.