CSS Selector Benchmark: .btn vs [class^="btn-"] vs [class*=" btn-"]

Measuring CSS selector matching performance across elements with 1 class versus 100 classes (with .btn-primary positioned at the start, middle, and end of the class attribute, plus a realistic mixed DOM).

.btn [class^="btn-"] [class*=" btn-"] [class^="btn-"], [class*=" btn-"]
Discovering benchmark tests from files…

Benchmark Results

DOM Scenario Selector Description Runs / Second Relative Performance
Discovering benchmark tests from files…

Tests in this Folder

What is being tested?

In UI libraries and component frameworks, variant classes like .btn-primary are matched either via dedicated class names or attribute selector patterns.

  • .btn matches via atomic class hash lookup.
  • [class^="btn-"] matches when the variant class is the first class.
  • [class*=" btn-"] matches when the variant class is preceded by a space.
  • [class^="btn-"], [class*=" btn-"] matches both start and interior variant classes.

Key Performance Factors

  • 1 Class vs 100 Classes: Multi-class DOM elements require parsing and traversing long class strings.
  • Token Position: Attribute substring matching (*=) scans the entire string until a match is found or the string terminates.
  • Prefix Matching: ^= is O(1) string prefix check, failing fast if the token is not at the very beginning.

DOM Structure

Each scenario tests against 1,500 structured DOM elements (100 cards with 15 nested buttons, badges, links, and distractor elements) ensuring robust, statistically valid style resolution samples.