Run results for: Class Selector vs AttributeSelector 2

Run details:

User agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:107.0) Gecko/20100101 Firefox/107.0

Browser: Firefox 107

Operating system: Windows 8.1

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
test 1	3611094.0 Ops/sec
test 2	1652585.5 Ops/sec
test 3	1258557.0 Ops/sec
test 4	1111465.0 Ops/sec
test 5	946460.4 Ops/sec
test 6	1328001.5 Ops/sec
test 7	2387667.8 Ops/sec
test 8	1037296.5 Ops/sec
test 9	714200.5 Ops/sec
test 10	1293267.8 Ops/sec

HTML Preparation code:

<div class="test" data-test="foo">
  <div class="inner -foo" data-inner="foo">foo</div>
  <div class="inner -foo -bar" data-inner="foo bar">bar</div>
  <div class="inner -baz" data-inner="baz">baz</div>
</div>

Tests:

test 1
document.querySelector('.test');
test 2
document.querySelector('.test[data-test="foo"] .inner:not(.-foo)');
test 3
document.querySelector('.test[data-test="foo"] [data-inner]:not([data-inner="foo"])');
test 4
document.querySelector('.test[data-test="foo"] [data-inner]:not([data-inner~="foo"])');
test 5
document.querySelector('.test[data-test="foo"] :not([data-inner~="bar"])');
test 6
document.querySelector('.test[data-test="foo"] [data-inner="baz"]');
test 7
document.querySelector('.test[data-test="foo"] .-bar');
test 8
document.querySelectorAll('.test[data-test="foo"] .inner:not(.-foo)');
test 9
document.querySelectorAll('.test[data-test="foo"] [data-inner]:not([data-inner~="foo"])');
test 10
document.querySelectorAll('.test[data-test="foo"] .-bar');

Run results for: Class Selector vs AttributeSelector 2

test 1

test 2

test 3

test 4

test 5

test 6

test 7

test 8

test 9

test 10