Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Class Selector vs ID Selector vs Extended Data Attribute Selector Performance Test
(version: 0)
Class Selector vs ID Selector vs Extended Data Attribute Selector Performance Test
Comparing performance of:
Class vs ID vs Extended Data Attribute
Created:
3 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div class="hello" id="hello" data-some-long-long-attr="some long long long long value" data-test="hello-and-bye">Hello</div>
Tests:
Class
document.querySelector('.hello');
ID
document.querySelector('#hello');
Extended Data Attribute
document.querySelector('[data-some-long-long-attr]')
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Class
ID
Extended Data Attribute
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Overview** The provided benchmark measures the performance of different selector types in JavaScript: Class Selector, ID Selector, and Extended Data Attribute Selector. **Selector Types Compared** 1. **Class Selector**: This type of selector uses a CSS class name to select an element. In this benchmark, the `document.querySelector('.hello')` line is used as the benchmarking code. 2. **ID Selector**: This type of selector uses a unique ID to select an element. In this benchmark, the `document.querySelector('#hello')` line is used as the benchmarking code. 3. **Extended Data Attribute Selector**: This type of selector uses a custom attribute (in this case, `data-some-long-long-attr`) to select an element. In this benchmark, the `document.querySelector('[data-some-long-long-attr]')` line is used as the benchmarking code. **Pros and Cons** * **Class Selector**: Fastest in most cases, but may not be supported by older browsers or those with limited CSS class support. * **ID Selector**: Generally slower than Class Selector, but more widely supported across browsers. * **Extended Data Attribute Selector**: May be slower than the other two due to its custom nature, but can provide better performance when used in conjunction with other selectors. **Library Usage** In this benchmark, no specific libraries are required or recommended. The `document.querySelector()` method is a built-in JavaScript function that works across most browsers. **Special JS Features/Syntax** None mentioned in the provided code. However, it's worth noting that the use of Extended Data Attributes may require browser support and compatibility issues in older browsers. **Alternatives** Other alternatives for selector performance benchmarking include: * **CSS Selector Benchmark**: A benchmark specifically designed to test CSS selectors. * **Selector Comparison Tools**: Online tools like CodePen or JSFiddle can be used to compare the performance of different selectors. * **Benchmarking Frameworks**: Frameworks like Jest or Mocha can be used to create and run benchmarks, including those for selector performance. **Best Practices** When creating a benchmark like this, it's essential to: * Use a consistent and clear naming convention for test cases. * Provide accurate and meaningful descriptions for each test case. * Ensure the benchmark is representative of real-world use cases. * Run multiple iterations to account for variability in execution times.
Related benchmarks:
DataAttribute vs Class Selector vs ID Selector
DataAttribute vs Class Selector vs ID native 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 Selector vs ~=
Comments
Confirm delete:
Do you really want to delete benchmark?