Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
DataAttribute vs Class Selector vs ID Selector v2
(version: 0)
Comparing performance of:
Class vs ID vs data attribute
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div class="hello" id="hello" data-hello="hello">Hello</div>
Tests:
Class
document.querySelector('.hello');
ID
document.querySelector('#hello');
data attribute
document.querySelector('[data-hello]');
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Class
ID
data attribute
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Browser/OS:
Chrome 120 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=502002" width="100%" height="500px"></iframe>
Class
9.1M/s
ID
6.1M/s
data attribute
5.7M/s
View exact numbers
Test name
Executions per second
✓
Class
9,115,264 Ops/sec
ID
6,051,660 Ops/sec
data attribute
5,668,760 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the explanation of the provided benchmark. **Benchmark Purpose** The purpose of this benchmark is to compare the performance of three different approaches to select an HTML element: 1. **Class Selector**: Using `document.querySelector('.hello')` to select elements with the class `hello`. 2. **ID Selector**: Using `document.querySelector('#hello')` to select elements with the ID `hello`. 3. **Data Attribute**: Using `document.querySelector('[data-hello]')` to select elements that have a custom attribute `data-hello` set. **Options Compared** The benchmark compares the execution times of these three approaches on the same HTML document with an element containing the class, ID, and data attribute `hello`. **Pros and Cons of Each Approach** 1. **Class Selector** * Pros: Fast and efficient, as elements with the same class can be cached in a single DOM object. * Cons: May not work if the class name is dynamic or generated on the fly. 2. **ID Selector** * Pros: Simple and straightforward, as each element has a unique ID. * Cons: May be slower due to the need to look up the element's index in the DOM tree. 3. **Data Attribute** * Pros: Flexible and easy to use, as custom attributes can be added dynamically. * Cons: May not work if the attribute name is not unique or is generated on the fly. **Library Used** In this benchmark, no specific library is used beyond the built-in JavaScript DOM API. **Special JS Features/Syntax** None are mentioned in this benchmark. **Other Considerations** The benchmark only measures the execution time of each approach and does not consider other factors like memory usage or CPU overhead. **Alternatives** If you're looking for alternative approaches to select HTML elements, some common ones include: 1. **CSS Selectors**: Using CSS selectors like `*` (all elements), `.` (elements with a class), or `[attribute]` (elements with a custom attribute). 2. **QuerySelectorAll()**: Using the `querySelectorAll()` method to select multiple elements that match a CSS selector. 3. **Element.prototype.matches()**: Using the `matches()` method to check if an element matches a CSS selector. These alternatives may have different performance characteristics and use cases, depending on the specific requirements of your project.
Related benchmarks
DataAttribute vs Class Selector vs ID Selector
DataAttribute vs Class Selector vs ID native Selector
DataAttribute vs Class Selector vs ID Selector / JQuery
DataAttribute vs Class Selector vs ID Selector vs Custom Attributes
DataAttribute vs Class Selector vs ID GetById
Comments
Confirm delete:
Do you really want to delete benchmark?