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.

Practice

1. What is the main purpose of a toast notification in Bootstrap?

easy

A. To show brief messages without interrupting the user

B. To create a full-page modal dialog

C. To replace the navigation bar

D. To style buttons with animations

Solution

1. Step 1: Understand the role of toast notifications

   Toast notifications are small popup messages that appear temporarily to inform users without blocking their actions.

2. Step 2: Compare with other UI elements

   Unlike modals or navigation bars, toasts are brief and non-intrusive messages.

3. Final Answer:

   To show brief messages without interrupting the user -> Option A

4. Quick Check:

   Toast = brief, non-blocking message [OK]

Hint: Toasts show quick messages without stopping user actions [OK]

Common Mistakes:

• Confusing toasts with modals
• Thinking toasts replace navigation
• Assuming toasts are for styling buttons

2. Which of the following is the correct HTML structure to create a basic Bootstrap toast?

easy

A. TitleMessage

B. TitleMessage

C. TitleMessage

D. TitleMessage

Solution

1. Step 1: Identify correct Bootstrap toast markup

   The toast requires a container with class 'toast' and accessibility roles. It includes a 'toast-header' with a title and close button, and a 'toast-body' for the message.

2. Step 2: Check each option's structure

   Title

   Message

   matches Bootstrap's official toast structure with correct classes and ARIA attributes. Others use invalid tags or missing classes.

3. Final Answer:

   Option A's HTML structure is correct -> Option A

4. Quick Check:

   Bootstrap toast = div.toast + header + body + close button [OK]

Hint: Look for div.toast with toast-header and toast-body classes [OK]

Common Mistakes:

• Using non-standard tags like <toast>
• Missing aria attributes
• Incorrect class names for toast parts

3. Given this code snippet, what will happen when the page loads?

<div class='toast show' role='alert' aria-live='assertive' aria-atomic='true'>
  <div class='toast-header'>
    <strong class='me-auto'>Notice</strong>
    <button type='button' class='btn-close' data-bs-dismiss='toast' aria-label='Close'></button>
  </div>
  <div class='toast-body'>Hello, world!</div>
</div>

medium

A. The toast will appear but without the close button

B. The toast will be hidden and require JavaScript to show

C. The toast will cause a JavaScript error

D. The toast will be visible immediately on page load

Solution

1. Step 1: Understand the 'show' class effect

   Adding the 'show' class to a toast makes it visible immediately without needing JavaScript to trigger it.

2. Step 2: Check the close button presence

   The close button is included with correct classes and attributes, so it will appear and function properly.

3. Final Answer:

   The toast will be visible immediately on page load -> Option D

4. Quick Check:

   Class 'show' = visible toast [OK]

Hint: Class 'show' makes toast visible without extra code [OK]

Common Mistakes:

• Assuming toast is hidden without JS
• Thinking close button is missing
• Confusing 'show' with 'fade'

4. This code tries to show a toast but it doesn't appear. What is the likely problem?

const toastEl = document.querySelector('.toast');
const toast = new bootstrap.Toast(toastEl);
toast.show();

medium

A. The toast element is missing the required 'toast' class

B. The Bootstrap JavaScript library is not loaded

C. The toast.show() method does not exist

D. The toast element must have the 'show' class initially

Solution

1. Step 1: Check if Bootstrap JS is loaded

   The toast JavaScript API requires Bootstrap's JavaScript library to be loaded. Without it, calling new bootstrap.Toast will fail silently or cause errors.

2. Step 2: Verify other code parts

   The toast element has the correct class, and toast.show() is a valid method. The 'show' class is added by the method, so it should not be present initially.

3. Final Answer:

   The Bootstrap JavaScript library is not loaded -> Option B

4. Quick Check:

   Bootstrap JS missing = toast.show() fails [OK]

Hint: Ensure Bootstrap JS is included before using toast API [OK]

Common Mistakes:

• Forgetting to include Bootstrap JS
• Adding 'show' class manually before JS
• Misusing toast.show() method

5. You want to create a toast that automatically disappears after 3 seconds and can be paused on hover. Which Bootstrap options should you use in JavaScript?

hard

A. new bootstrap.Toast(element, { autohide: false }) and manually hide after 3 seconds

B. new bootstrap.Toast(element, { delay: 3000, autohide: true, pauseOnHover: true })

C. new bootstrap.Toast(element, { delay: 3000, autohide: true }) with CSS :hover pause

D. new bootstrap.Toast(element, { delay: 3000, autohide: true }) and add data-bs-pause='true'

Solution

1. Step 1: Identify options for auto-hide and delay

   Bootstrap's toast accepts 'delay' in milliseconds and 'autohide' boolean to control automatic disappearance.

2. Step 2: Check for pause on hover support

   Bootstrap does not have a built-in 'pauseOnHover' option in its Toast API. Pausing on hover is typically done with CSS or custom JavaScript.

3. Step 3: Evaluate each option

   new bootstrap.Toast(element, { delay: 3000, autohide: true }) with CSS :hover pause uses delay and autohide with CSS :hover pause, which is the correct approach. new bootstrap.Toast(element, { delay: 3000, autohide: true, pauseOnHover: true }) uses a non-existent 'pauseOnHover' option. new bootstrap.Toast(element, { autohide: false }) and manually hide after 3 seconds disables autohide and requires manual hiding. new bootstrap.Toast(element, { delay: 3000, autohide: true }) and add data-bs-pause='true' uses a non-standard data attribute.

4. Final Answer:

   new bootstrap.Toast(element, { delay: 3000, autohide: true }) with CSS :hover pause -> Option C

5. Quick Check:

   delay + autohide + CSS hover pause = auto-hide with hover pause [OK]

Hint: Use delay, autohide, and CSS :hover to pause [OK]

Common Mistakes:

• Forgetting pause on hover requires CSS or JS
• Assuming 'pauseOnHover' is a valid option
• Setting autohide false and hiding manually