Benchmark: Class vs Attribute selector

HTML Preparation code:


<div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div><div class="m"></div>
<div data-m></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Tests:

Class
$('m')
Attribute
$('[data-m]')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Class
Attribute

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:134.0) Gecko/20100101 Firefox/134.0

Browser/OS: Firefox 134 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Class	4114847.8 Ops/sec
Attribute	561770.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and explain what is being tested.

**Benchmark Definition**

The benchmark definition consists of two test cases: "Class" and "Attribute". Both test cases use JavaScript to query DOM elements.

**Test Cases**

1. **Class**: The test case uses `$('m')` to select all elements with the class `m`. This is a classic example of an element selector in jQuery.
2. **Attribute**: The test case uses `$('[data-m]')` to select all elements that have an attribute `data-m`. This is an attribute selector in jQuery.

**Library and Purpose**

Both test cases use jQuery, which is a popular JavaScript library for DOM manipulation and event handling. In this context, jQuery provides a convenient way to query the DOM using CSS-like selectors.

**What is being tested?**

The benchmark tests two different ways of querying the DOM:

1. **Element selector**: The "Class" test case uses an element selector (`$('m')`) to select all elements with the class `m`. This involves searching the DOM for elements that match the specified class.
2. **Attribute selector**: The "Attribute" test case uses an attribute selector (`$('[data-m]')`) to select all elements that have an attribute `data-m`. This involves searching the DOM for elements that have a specific attribute.

**Benchmark Results**

The latest benchmark results show two different execution rates:

1. **Class**: Chrome 70 on Windows Desktop executes the test case approximately 506,047 times per second.
2. **Attribute**: Chrome 70 on Windows Desktop executes the test case approximately 34,106 times per second.

These results suggest that element selectors are generally faster than attribute selectors in jQuery.

**Implications**

This benchmark highlights an important difference between element selectors and attribute selectors in jQuery:

* Element selectors tend to be faster because they only require a single lookup in the DOM.
* Attribute selectors can be slower because they involve searching for multiple elements with specific attributes, which may require more computational resources.

Related benchmarks:

Class vs Attribute selector (version: 0)

Comparing performance of: Class vs Attribute

Created: 6 years ago by: Guest

Jump to the latest result

Class

Attribute

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):