Tab Benchmark

Bootstrap 5 Tab JS (panel switcher + ARIA + keyboard nav + 43 KB infra) vs Native <details name=""> exclusive accordion

Methodology: Both sections contain 20 tab groups with 4 panels each (80 panels total). The benchmark creates Bootstrap Tab instances (init cost), then switches through all 4 tabs in each group for 100 cycles (8,000 switch 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.

Bootstrap JS

Uses bootstrap.Tab — manages .active classes, fires show/shown/hide/hidden events, handles keyboard navigation (arrow keys), ARIA attributes. Requires 8 JS dependency files (43 KB).

Home panel content.

Profile panel content.

Contact panel content.

Native Browser API

Uses <details name=""> — only one open at a time per group, browser closes others automatically. Built-in keyboard support (Enter/Space). Zero initialization, zero framework JS.

Home

Home panel content.

Profile

Profile panel content.

Contact

Contact panel content.

Results

Metric	Bootstrap Tab	Native <details>
Initialization time (20 groups × 4 tabs)	-	-
Switch time (100 cycles × 20 groups × 4 tabs)	-	-
DOM mutations (100 cycles × 20 groups × 4 tabs)	-	-
Instance memory cost (80 tab instances)	-	-
JS code size tab.js (10.2 KB) + base-component (2.8 KB) + event-handler (9.2 KB) + selector-engine (4.1 KB) + data (2.1 KB) + manipulator (2.3 KB) + util (9.1 KB) + config (2.5 KB)	-	-
CSS output size _nav.scss (5.1 KB)	-	-

Bootstrap JS 20 groups × 4 tabs — `bootstrap.Tab`

Native Browser API 20 groups × 4 tabs — `<details name="">`

Key difference: Bootstrap Tab is a panel switcher backed by 43 KB of JavaScript infrastructure (custom event system, data store, config parser, DOM manipulation utils, ARIA manager, keyboard navigator). It adds/removes .active classes on triggers and panels, manages aria-selected attributes, handles arrow-key navigation, and fires 4 lifecycle events per switch. Native <details name=""> provides mutually exclusive panels with zero initialization — the browser automatically closes sibling details elements when one opens. Built-in keyboard support (Enter/Space) and accessibility semantics are included.

Native exclusive tabs using <details name=""> (entire implementation)

<!-- Exclusive tab group — only one open at a time -->
<details name="my-tabs" open>
  <summary>Home</summary>
  <p>Home panel content.</p>
</details>
<details name="my-tabs">
  <summary>Profile</summary>
  <p>Profile panel content.</p>
</details>
<details name="my-tabs">
  <summary>Contact</summary>
  <p>Contact panel content.</p>
</details>

<!-- That's it. No JS. No ARIA attributes.
     Browser handles exclusivity, keyboard, and semantics. -->