Toast notifications in Bootsrap - Performance & Optimization

Performance: Toast notifications

MEDIUM IMPACT

Toast notifications affect interaction responsiveness and visual stability by adding transient UI elements that appear and disappear dynamically.

Showing temporary messages to users without blocking interaction

Bootsrap

<div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"></div>
<script>
function showToast(message) {
  const toast = document.getElementById('toast');
  toast.textContent = message;
  toast.classList.add('show');
  setTimeout(() => {
    toast.classList.remove('show');
  }, 3000);
}
</script>
<style>
.toast {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}
.toast.show {
  opacity: 1;
  pointer-events: auto;
}
</style>

Using opacity and pointer-events with CSS transitions avoids layout recalculation and reflow, preventing layout shifts and improving responsiveness.

📈 Performance GainSingle composite layer update, no reflows, no CLS

Showing temporary messages to users without blocking interaction

Bootsrap

<div id="toast" style="display:none; position:fixed; bottom:0; width:100%; background:#000; color:#fff;" aria-live="polite"></div>
<script>
function showToast(message) {
  const toast = document.getElementById('toast');
  toast.style.display = 'block';
  toast.textContent = message;
  setTimeout(() => {
    toast.style.display = 'none';
  }, 3000);
}
</script>

Directly toggling display property causes layout recalculation and reflow, blocking rendering and causing layout shifts.

📉 Performance CostTriggers 2 reflows per toast show/hide, causes CLS due to layout shift

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Toggle display property	1 node updated	2 reflows per show/hide	High paint cost due to layout shift	[X] Bad
Toggle opacity with CSS transitions	1 node updated	0 reflows	Low paint and composite cost	[OK] Good

Rendering Pipeline

Toast notifications update the DOM and CSS properties to show/hide messages. Using display toggling triggers layout recalculation and reflow, while opacity changes only trigger paint and composite stages.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage is most expensive when display property changes cause reflows.

Core Web Vital Affected

INP, CLS

Toast notifications affect interaction responsiveness and visual stability by adding transient UI elements that appear and disappear dynamically.

Optimization Tips

1Avoid toggling display property to show/hide toasts to prevent layout shifts.

2Use CSS opacity and pointer-events with transitions for smooth, non-blocking toast animations.

3Keep toast DOM nodes minimal and reuse them to reduce DOM operations.

Performance Quiz - 3 Questions

Which CSS property change is best for showing/hiding toast notifications to avoid layout shifts?

A display

B opacity

C width

D height

DevTools: Performance

How to check: Record a performance profile while triggering toast notifications. Look for layout and paint events in the flame chart.

What to look for: Check if layout recalculations occur on toast show/hide (bad) or if only paint and composite stages run (good). Also watch for CLS score in Lighthouse.