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>

​x
 
​
<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')
$('m')
Attribute
$('[data-m]')
$('[data-m]')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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):

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

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.
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:

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.
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:

Class: Chrome 70 on Windows Desktop executes the test case approximately 506,047 times per second.
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.

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):