Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
DataAttribute vs Class Selector vs ID Selector / JQuery
(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> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
Tests:
Class
$('.hello');
ID
$('#hello');
data attribute
$('[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 (iPhone; CPU iPhone OS 18_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/130.0.6723.90 Mobile/15E148 Safari/604.1
Browser/OS:
Chrome Mobile iOS 130 on iOS 18.1
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=564533" width="100%" height="500px"></iframe>
ID
4.3M/s
Class
2.2M/s
data attribute
1.4M/s
View exact numbers
Test name
Executions per second
✓
ID
4,278,410 Ops/sec
Class
2,163,874 Ops/sec
data attribute
1,381,483 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Overview** The provided JSON represents a JavaScript microbenchmark test case on the MeasureThat.net website. The test compares the performance of three different approaches to select elements from an HTML document: 1. Class selector (`$('.hello')`) 2. ID selector (`$('#hello')`) 3. Data attribute selector (`('[data-hello]')`) **Approach 1: Class Selector** The class selector approach uses the `$` function provided by jQuery to select elements based on their `class` attribute. In this case, the test looks for an element with a `class` attribute equal to `"hello"`. Pros: * Easy to implement and understand * Can be used to select multiple elements at once Cons: * May not be as efficient as other approaches if the class name is complex or contains many characters * May not work well with older browsers that don't support CSS selectors **Approach 2: ID Selector** The ID selector approach uses the `$` function provided by jQuery to select an element based on its `id` attribute. In this case, the test looks for an element with an `id` attribute equal to `"hello"`. Pros: * Fast and efficient * Works well even in older browsers that don't support CSS selectors Cons: * Requires a unique `id` attribute for each element * May not be suitable if you need to select multiple elements based on different attributes **Approach 3: Data Attribute Selector** The data attribute selector approach uses the `$` function provided by jQuery to select an element based on its `data-hello` attribute. In this case, the test looks for an element with a `data-hello` attribute equal to `"hello"`. Pros: * Fast and efficient * Works well even in older browsers that don't support CSS selectors Cons: * Requires a custom attribute (`data-hello`) on the HTML elements * May not be suitable if you need to select multiple elements based on different attributes **Library: jQuery** The `$` function used in all three approaches is provided by jQuery, a popular JavaScript library. jQuery's `selector` functions allow developers to select elements from an HTML document using CSS selectors. **Special JS Feature: None** There are no special JavaScript features or syntax used in this benchmark. **Other Alternatives** If you prefer not to use jQuery, you can also use native JavaScript methods to select elements: * Class selector: `document.querySelectorAll('.hello')` * ID selector: `document.getElementById('hello')` * Data attribute selector: `document.querySelector('[data-hello]')` However, these approaches may be less efficient and more verbose than using the `$` function provided by jQuery. **Benchmark Results** The benchmark results show that: * The ID selector approach is the fastest (805005 executions per second) * The data attribute selector approach is slightly slower than the ID selector approach but faster than the class selector approach (399585 executions per second and 1665857.25 executions per second, respectively) * The class selector approach is the slowest (1665857.25 executions per second)
Related benchmarks
DataAttribute vs Class Selector vs ID Selector
DataAttribute vs Class Selector vs ID native Selector
DataAttribute vs Class Selector vs ID GetById
Comments
Confirm delete:
Do you really want to delete benchmark?