Dropdown button basics in Bootsrap - Performance & Optimization

Performance: Dropdown button basics

MEDIUM IMPACT

Dropdown buttons affect interaction responsiveness and visual stability during user clicks.

Creating a dropdown button that opens a menu on click

Bootsrap

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Item 1</a></li>
    <li><a class="dropdown-item" href="#">Item 2</a></li>
  </ul>
</div>

Bootstrap's built-in dropdown uses CSS classes and JavaScript optimized for minimal reflows and accessibility.

📈 Performance GainSingle reflow on toggle, uses compositing for smooth animation, and improves INP metric.

Creating a dropdown button that opens a menu on click

Bootsrap

<button class="btn btn-primary" onclick="document.getElementById('menu').style.display='block'">Dropdown</button>
<div id="menu" style="display:none; position:absolute; background:#fff; border:1px solid #ccc;">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
</div>

Manually toggling display with inline styles causes layout thrashing and no accessibility support.

📉 Performance CostTriggers multiple reflows on each click due to style changes and no compositing optimization.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual inline style toggle	Minimal DOM nodes	Multiple reflows per toggle	High paint cost due to layout thrashing	[X] Bad
Bootstrap dropdown component	Minimal DOM nodes with semantic structure	Single reflow per toggle	Lower paint cost with compositing	[OK] Good

Rendering Pipeline

Dropdown toggling changes CSS classes triggering style recalculation and layout. Paint and composite stages update the visible menu.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage due to position changes and visibility toggling

Core Web Vital Affected

INP

Dropdown buttons affect interaction responsiveness and visual stability during user clicks.

Optimization Tips

1Avoid toggling display property directly to prevent multiple reflows.

2Use CSS classes and Bootstrap's built-in dropdown for efficient toggling.

3Animate opacity and transform instead of layout-affecting properties for smooth interactions.

Performance Quiz - 3 Questions

What causes multiple reflows when toggling a dropdown menu manually with inline styles?

A Using CSS classes to toggle visibility

B Changing display property directly on the element

C Using opacity and transform for animations

D Using semantic HTML elements

DevTools: Performance

How to check: Record a performance profile while clicking the dropdown button. Look for layout and paint events triggered on toggle.

What to look for: Check for minimal layout recalculations and smooth frame rates indicating good interaction performance.