Benchmark: Class Selector vs AttributeSelector 2

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');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
test 1
test 2
test 3
test 4
test 5
test 6
test 7
test 8
test 9
test 10

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Firefox 107 on Windows 8.1

View result in a separate tab

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

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what is being tested, compared, and their pros/cons.

**Benchmark Purpose**

The main goal of this benchmark is to compare the performance of two different selectors in JavaScript: `Class Selector` (also known as `elementbyId`) vs `AttributeSelector 2`. The test focuses on selecting elements using CSS class names with multiple classes, attribute values, and pseudo-classes.

**Selected Options**

The benchmark compares six different selector options:

1. **Class Selector**: `.test[data-test="foo"] .inner:not(.-foo)`
2. **AttributeSelector 2**: `.test[data-test="foo"] [data-inner]:not([data-inner~="foo"])`
3. **AttributeSelector with attribute value**: `.test[data-test="foo"] [data-inner="baz"]`
4. **AttributeSelector with pseudo-class**: `.test[data-test="foo"] :not([data-inner~="bar"])`
5. **Multiple element selection using Class Selector**: `document.querySelectorAll('.test[data-test="foo"] .inner:not(.-foo)')`
6. **Multiple element selection using AttributeSelector 2**: `document.querySelectorAll('.test[data-test="foo"] [data-inner]:not([data-inner~="foo"])')`

**Comparison of Options**

Each option has its pros and cons:

* **Class Selector**:
	+ Pros: Simple, efficient, and widely supported.
	+ Cons: May not be as flexible as attribute selectors.
* **AttributeSelector 2**:
	+ Pros: More flexible than Class Selector, supports multiple attributes, and pseudo-classes.
	+ Cons: Can be slower due to the complexity of the selector syntax.
* **AttributeSelector with attribute value**:
	+ Pros: Simple, efficient, and fast.
	+ Cons: Limited to a single attribute value.
* **AttributeSelector with pseudo-class**:
	+ Pros: Supports pseudo-classes for more complex selections.
	+ Cons: Can be slower due to the complexity of the selector syntax.
* **Multiple element selection using Class Selector**: Fast and efficient, but may not be suitable for all use cases.
* **Multiple element selection using AttributeSelector 2**: Flexible, but can be slower due to the complexity of the selector syntax.

**Browser Performance**

The benchmark results show that different browsers perform differently on each option. For example:

* Firefox 107 consistently performs well with Class Selector and AttributeSelector 2, while being slightly slower with AttributeSelector with pseudo-class.
* Edge, Chrome, and Safari have similar performance across all options.

Overall, this benchmark provides valuable insights into the performance characteristics of different JavaScript selectors and highlights the importance of choosing the right selector for specific use cases.

Related benchmarks:

Class Selector vs AttributeSelector 2 (version: 0)

Comparing performance of: test 1 vs test 2 vs test 3 vs test 4 vs test 5 vs test 6 vs test 7 vs test 8 vs test 9 vs test 10

Created: one year ago by: Guest

Jump to the latest result

test 1

test 2

test 3

test 4

test 5

test 6

test 7

test 8

test 9

test 10

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):