Carousel indicators in Bootsrap - Performance & Optimization

Performance: Carousel indicators

MEDIUM IMPACT

Carousel indicators affect the interaction responsiveness and visual stability during slide changes in a carousel component.

Updating carousel indicators on slide change

Bootsrap

<script>const indicators = document.querySelector('.carousel-indicators'); indicators.addEventListener('click', e => { if(e.target.tagName === 'BUTTON'){ indicators.querySelector('.active')?.classList.remove('active'); e.target.classList.add('active'); } });</script>

Using event delegation reduces event listeners and limits DOM writes to only two class changes per click.

📈 Performance Gainsingle reflow per click regardless of number of indicators

Updating carousel indicators on slide change

Bootsrap

<script>document.querySelectorAll('.carousel-indicators button').forEach(btn => btn.addEventListener('click', () => { document.querySelectorAll('.carousel-indicators button').forEach(b => b.classList.remove('active')); btn.classList.add('active'); }));</script>

This code triggers multiple DOM writes and forces layout recalculations on every click, causing slow interaction on many indicators.

📉 Performance Costtriggers N reflows per click where N is number of indicators

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multiple event listeners on each indicator	Many event listeners, multiple class changes	N reflows per click	High paint cost due to frequent style changes	[X] Bad
Single event listener with event delegation	One event listener, two class changes per click	1 reflow per click	Low paint cost, minimal style recalculations	[OK] Good

Rendering Pipeline

Carousel indicators update triggers style recalculation and layout changes when active states toggle, affecting paint and composite stages.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout due to multiple class changes causing reflows

Core Web Vital Affected

INP

Carousel indicators affect the interaction responsiveness and visual stability during slide changes in a carousel component.

Optimization Tips

1Use event delegation to minimize event listeners on carousel indicators.

2Limit DOM writes to only necessary class changes when updating active states.

3Avoid triggering multiple reflows by batching style changes.

Performance Quiz - 3 Questions

What is the main performance problem with adding separate click listeners to each carousel indicator button?

A It causes multiple reflows and slows down interaction as the number of indicators grows.

B It increases the initial page load time significantly.

C It causes the carousel images to load slower.

D It prevents the carousel from being accessible.

DevTools: Performance

How to check: Record a performance profile while clicking carousel indicators. Look for layout and style recalculation events in the flame chart.

What to look for: Multiple layout events per click indicate inefficient DOM updates; fewer layout events show optimized performance.