Split button dropdowns in Bootsrap - Performance & Optimization

Performance: Split button dropdowns

MEDIUM IMPACT

Split button dropdowns affect page interactivity and rendering speed by adding extra DOM elements and event listeners.

Creating a split button dropdown with minimal DOM and event overhead

Bootsrap

<div class="btn-group">
  <button type="button" class="btn btn-primary" id="mainAction">Action</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" aria-haspopup="true" aria-expanded="false" aria-label="Toggle Dropdown" data-bs-toggle="dropdown"></button>
  <ul class="dropdown-menu" aria-labelledby="mainAction">
    <li><button class="dropdown-item" type="button">Option 1</button></li>
    <li><button class="dropdown-item" type="button">Option 2</button></li>
  </ul>
</div>

Uses semantic buttons with ARIA attributes for accessibility and minimal event listeners, reducing DOM complexity.

📈 Performance GainSingle reflow on open, fewer event listeners, better INP and accessibility.

Creating a split button dropdown with minimal DOM and event overhead

Bootsrap

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

This pattern adds multiple buttons and a dropdown menu with event listeners, increasing DOM size and event handling cost.

📉 Performance CostTriggers 3 reflows on open, adds multiple event listeners, increasing INP latency.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Split button with multiple buttons and dropdown	High (multiple buttons + menu items)	3+ on open	Medium (dropdown repaint)	[X] Bad
Split button with semantic buttons and ARIA, minimal DOM	Low (few buttons + menu items)	1 on open	Low (transform-based animation)	[OK] Good

Rendering Pipeline

Split button dropdowns add DOM nodes and event listeners that affect style calculation, layout, and paint during interaction.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage due to dropdown menu opening causing reflows

Core Web Vital Affected

INP

Split button dropdowns affect page interactivity and rendering speed by adding extra DOM elements and event listeners.

Optimization Tips

1Keep split button dropdown DOM shallow and minimal.

2Use CSS transform animations to avoid layout reflows.

3Add ARIA attributes like aria-expanded for accessibility and better interaction.

Performance Quiz - 3 Questions

What is the main performance cost when opening a split button dropdown?

A Network latency fetching dropdown items

B Increased JavaScript bundle size

C Multiple reflows caused by layout changes

D Slow CSS selector matching

DevTools: Performance

How to check: Open DevTools, go to Performance tab, record while opening the split button dropdown, then stop recording.

What to look for: Look for layout and paint events triggered by dropdown open; fewer and shorter events indicate better performance.