Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
DataAttribute vs Class Selector vs ID native Selector
(version: 0)
Comparing performance of:
Class vs ID vs data attribute
Created:
5 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div class="hello" id="hello" data-hello>Hello</div>
Tests:
Class
document.querySelector('.hello');
ID
document.getElementById('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:
one year ago
)
User agent:
Mozilla/5.0 (Android 12; Mobile; rv:140.0) Gecko/140.0 Firefox/140.0
Browser/OS:
Firefox Mobile 140 on Android
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=610860" width="100%" height="500px"></iframe>
ID
3.7M/s
Class
2.3M/s
data attribute
2.1M/s
View exact numbers
Test name
Executions per second
✓
ID
3,737,868 Ops/sec
Class
2,342,712 Ops/sec
data attribute
2,126,970 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Overview** The provided JSON represents a JavaScript microbenchmark test suite on the MeasureThat.net website. The benchmark compares the performance of three different methods to select an HTML element: `document.querySelector('.hello')`, `document.getElementById('hello')`, and `document.querySelector('[data-hello]')`. These methods are commonly used in web development to retrieve elements from the DOM. **Methods Comparison** The three methods being compared have different advantages and disadvantages: 1. **Class Selector (`document.querySelector('.hello')`)**: * Pros: Fast, efficient, and widely supported. * Cons: May not work if the class is dynamically added or removed. * Purpose: Selects an element by its class name. 2. **ID Native Selector (`document.getElementById('hello')`)**: * Pros: Fast and efficient, especially when combined with `querySelector`. * Cons: Limited to elements with a unique ID attribute. * Purpose: Selects an element by its ID attribute. 3. **Data Attribute Selector (`document.querySelector('[data-hello]')`)**: * Pros: Flexible and dynamic, can work even if the class or ID is dynamically added or removed. * Cons: May be slower than class or ID selectors due to attribute lookup. * Purpose: Selects an element by its data attribute. **Library Usage** In this benchmark, none of the methods rely on a specific library. However, the `querySelector` method uses the Web API's `querySelector()` function, which is part of the ECMAScript standard and supported by most modern browsers. **Special JavaScript Features/Syntax** There are no special JavaScript features or syntax used in this benchmark. The code only uses basic DOM methods and standard JavaScript syntax. **Other Alternatives** If you need to select elements from a different HTML structure or with different attributes, you might consider alternative methods: * `document.getElementsByClassName('hello')`: Selects an element by its class name using the `getElementsByClassName()` method. * `document.querySelectorAll('.hello')`: Selects multiple elements by their class names using the `querySelectorAll()` method. * `document.querySelector('[attribute="value"]')`: Selects an element by a specific attribute value. Keep in mind that these alternatives might have different performance characteristics, and it's essential to test them in your specific use case. **Benchmark Result Interpretation** The latest benchmark result shows the execution rate per second for each method on a Chrome 90 browser running on a Mac OS X 10.15.7 device. The results indicate: * ID Native Selector (`document.getElementById('hello')`) is the fastest, with an average of 4719036 executions per second. * Data Attribute Selector (`document.querySelector('[data-hello]')`) is slower, with an average of 2542531 executions per second. * Class Selector (`document.querySelector('.hello')`) is the slowest, with an average of 2083029 executions per second. These results are specific to this benchmark and might vary depending on your use case and browser/OS combination.
Related benchmarks
DataAttribute vs Class Selector vs ID Selector
DataAttribute vs Class Selector vs ID Selector vs Custom Attributes
DataAttribute vs Class Selector vs ID Selector v3
DataAttribute vs Class Selector vs ID GetById
Comments
Confirm delete:
Do you really want to delete benchmark?