`.btn` vs `[class^="btn-"]` vs `[class*=" btn-"]` performance

benchmark-results.txt

# Tested with https://github.com/GoogleChromeLabs/css-selector-benchmark

$ npm run benchmark btn

> css-selector-benchmark@0.0.1 benchmark
> node cli/index.js btn

ℹ️ Running benchmark using browser chrome (Chrome/151.0.7922.169/@4b1c7520055f77780fe76d89bb89b76e4d19f64c)

== Starting Benchmark ====== 

[…]

== End Benchmark =========== 
{
  scenario: '1 class',
  selector: '.btn',
  description: '1 Class: .btn',
  result: 6265.73,
  perc: '100.00%'
}
{
  scenario: '1 class',
  selector: '[class^="btn-"]',
  description: '1 Class: [class^="btn-"]',
  result: 659.47,
  perc: '10.53%'
}
{
  scenario: '1 class',
  selector: '[class*=" btn-"]',
  description: '1 Class: [class*=" btn-"]',
  result: 871.1,
  perc: '13.90%'
}
{
  scenario: '100 classes (start)',
  selector: '.btn',
  description: '100 classes (start): .btn',
  result: 492.77,
  perc: '7.86%'
}
{
  scenario: '100 classes (start)',
  selector: '[class^="btn-"]',
  description: '100 classes (start): [class^="btn-"]',
  result: 402.67,
  perc: '6.43%'
}
{
  scenario: '100 classes (start)',
  selector: '[class*=" btn-"]',
  description: '100 classes (start): [class*=" btn-"]',
  result: 363.23,
  perc: '5.80%'
}
{
  scenario: '100 classes (end)',
  selector: '.btn',
  description: '100 classes (end): .btn',
  result: 482.69,
  perc: '7.70%'
}
{
  scenario: '100 classes (end)',
  selector: '[class^="btn-"]',
  description: '100 classes (end): [class^="btn-"]',
  result: 475.91,
  perc: '7.60%'
}
{
  scenario: '100 classes (end)',
  selector: '[class*=" btn-"]',
  description: '100 classes (end): [class*=" btn-"]',
  result: 328.22,
  perc: '5.24%'
}
{
  scenario: '100 classes (middle)',
  selector: '.btn',
  description: '100 classes (middle): .btn',
  result: 524.65,
  perc: '8.37%'
}
{
  scenario: '100 classes (middle)',
  selector: '[class^="btn-"]',
  description: '100 classes (middle): [class^="btn-"]',
  result: 500.69,
  perc: '7.99%'
}
{
  scenario: '100 classes (middle)',
  selector: '[class*=" btn-"]',
  description: '100 classes (middle): [class*=" btn-"]',
  result: 361,
  perc: '5.76%'
}
{
  scenario: 'Mixed DOM',
  selector: '.btn',
  description: 'Mixed DOM: .btn',
  result: 680.98,
  perc: '10.87%'
}
{
  scenario: 'Mixed DOM',
  selector: '[class^="btn-"]',
  description: 'Mixed DOM: [class^="btn-"]',
  result: 525.22,
  perc: '8.38%'
}
{
  scenario: 'Mixed DOM',
  selector: '[class*=" btn-"]',
  description: 'Mixed DOM: [class*=" btn-"]',
  result: 459.15,
  perc: '7.33%'
}
{
  scenario: 'Mixed DOM',
  selector: '[class^="btn-"], [class*=" btn-"]',
  description: 'Mixed DOM: [class^="btn-"], [class*=" btn-"]',
  result: 391.84,
  perc: '6.25%'
}