Toast Benchmark

Bootstrap 5 Toast JS (class toggler + timer + 41 KB infra) vs Native Popover API (popover="manual")

Methodology: Both sections contain 20 toast elements with identical content. The benchmark creates Bootstrap Toast instances (init cost), then shows and hides all 20 toasts for 100 cycles (2,000 show + 2,000 hide operations per section). DOM mutations are counted via MutationObserver. CSS transitions are disabled during the run so we measure raw JS overhead, not animation time.

Popover API @starting-style

Bootstrap JS

Uses bootstrap.Toast — manages .show/.showing classes, fires 4 lifecycle events, tracks hover/focus for auto-hide pause. Requires 9 JS dependency files (41 KB).

Hello from Bootstrap Toast JS.

Native Browser API

Uses popover="manual" — element in top layer, no light-dismiss. Show via showPopover(), dismiss via popovertarget. Zero initialization, zero framework JS.

Hello from native Popover API. Zero JS.

Results

Metric	Bootstrap Toast	Native Popover
Initialization time (20 instances)	-	-
Show/Hide time (100 cycles × 20 items)	-	-
DOM mutations (100 cycles × 20 items)	-	-
Instance memory cost (20 instances)	-	-
JS code size toast.js (6.1 KB) + base-component (2.8 KB) + event-handler (9.2 KB) + manipulator (2.3 KB) + data (2.1 KB) + selector-engine (4.1 KB) + util (9.1 KB) + config (2.5 KB) + component-functions (2.0 KB)	-	-
CSS output size _toasts.scss (2.4 KB)	-	-

Bootstrap JS 20 items — `bootstrap.Toast`

Native Browser API 20 items — `popover="manual"`

Key difference: Bootstrap Toast is a class toggler backed by 41 KB of JavaScript infrastructure (custom event system, data store, config parser, DOM manipulation utils, jQuery compatibility layer). It adds/removes .show and .showing CSS classes, manages a timer for auto-hide, and tracks mouse/keyboard interaction to pause dismissal. The native Popover API achieves the same show/hide behavior with zero initialization — showPopover() moves the element to the top layer, hidePopover() removes it. Dismiss buttons work via the declarative popovertarget attribute. No classes, no events, no timers needed.

Native toast using Popover API (entire implementation)

<!-- Toast element -->
<div popover="manual" id="my-toast" class="toast-styled">
  <div class="header">
    Notification
    <button popovertarget="my-toast"
            popovertargetaction="hide">&times;</button>
  </div>
  <div class="body">Message content here.</div>
</div>

<!-- Show button -->
<button popovertarget="my-toast">Show Toast</button>

<!-- Optional: auto-hide with minimal JS -->
<script>
  // Only needed if you want auto-dismiss
  toast.addEventListener('toggle', e => {
    if (e.newState === 'open')
      setTimeout(() => toast.hidePopover(), 5000);
  });
</script>