Run results for: Class Selector vs AttributeSelector 2

Run details:

User agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Browser: Chrome 108

Operating system: Windows 8.1

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
test 1	3270033.5 Ops/sec
test 2	1877708.9 Ops/sec
test 3	2013792.2 Ops/sec
test 4	1643558.1 Ops/sec
test 5	2312723.2 Ops/sec
test 6	2298827.5 Ops/sec
test 7	2539572.8 Ops/sec
test 8	1127888.6 Ops/sec
test 9	1042994.8 Ops/sec
test 10	1367253.6 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