Progress bars in Bootsrap - Performance & Optimization

Performance: Progress bars

MEDIUM IMPACT

Progress bars affect rendering speed and interaction responsiveness, especially when animated or updated frequently.

Updating a progress bar frequently during a file upload

Bootsrap

<div class="progress"><div class="progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" role="progressbar" style="width: 0%;">0%</div></div>
<script>
  let lastValue = 0;
  function updateProgress(value) {
    if (value !== lastValue) {
      const bar = document.querySelector('.progress-bar');
      bar.style.width = value + '%';
      bar.setAttribute('aria-valuenow', value);
      bar.textContent = value + '%';
      lastValue = value;
    }
  }
  setInterval(() => updateProgress(Math.floor(Math.random() * 100)), 100);
</script>

Updates only when value changes and reduces update frequency to 100ms, minimizing reflows and improving responsiveness.

📈 Performance GainReduces reflows to 10 per second and avoids unnecessary DOM writes.

Updating a progress bar frequently during a file upload

Bootsrap

<div class="progress"><div class="progress-bar" style="width: 0%;"></div></div>
<script>
  function updateProgress(value) {
    const bar = document.querySelector('.progress-bar');
    bar.style.width = value + '%';
    bar.textContent = value + '%';
  }
  setInterval(() => updateProgress(Math.floor(Math.random() * 100)), 50);
</script>

Updating the width and text content every 50ms causes many style recalculations and layout reflows.

📉 Performance CostTriggers 20 reflows per second, causing input lag and janky animations.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Frequent width and text updates every 50ms	Multiple style and text updates	20 reflows per second	High paint cost due to frequent changes	[X] Bad
Conditional width updates every 100ms without text changes	Minimal style updates	10 reflows per second	Lower paint cost	[OK] Good

Rendering Pipeline

Progress bar updates affect Style Calculation and Layout stages because changing width triggers recalculation and reflow. Paint and Composite stages follow to visually update the bar.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout (reflow) is most expensive due to width changes causing element resizing.

Core Web Vital Affected

INP

Progress bars affect rendering speed and interaction responsiveness, especially when animated or updated frequently.

Optimization Tips

1Avoid updating progress bar width more often than necessary.

2Use CSS transitions or animations for smooth visual updates without frequent JS changes.

3Throttle or debounce progress updates to reduce layout thrashing.

Performance Quiz - 3 Questions

What causes the most performance cost when updating a progress bar frequently?

A Adding new DOM elements inside the progress bar

B Changing the background color triggers repaint only

C Changing the width style property triggers layout recalculations

D Using aria attributes for accessibility

DevTools: Performance

How to check: Open DevTools, go to Performance tab, record while progress bar updates, then analyze Layout and Recalculate Style events frequency.

What to look for: Look for frequent Layout events and long tasks indicating reflows; fewer and shorter events mean better performance.