Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
DataAttribute vs Class Selector vs ID GetById
(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</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:
9 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 Edg/141.0.0.0
Browser/OS:
Chrome 141 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=619251" width="100%" height="500px"></iframe>
ID
21.4M/s
Class
8.1M/s
data attribute
3.7M/s
View exact numbers
Test name
Executions per second
✓
ID
21,426,508 Ops/sec
Class
8,143,738 Ops/sec
data attribute
3,663,576 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and its test cases. **Benchmark Definition** The benchmark measures the performance of different approaches to select an HTML element: by class, by ID, or by data attribute. The benchmark uses JavaScript to query the elements in question and reports the number of executions per second. **Test Cases** There are three test cases: 1. **Class**: `document.querySelector('.hello');` This test case queries the element with the class "hello" using a class selector. 2. **ID**: `document.getElementById('#hello');` This test case queries the element with the ID "hello" using an ID selector. 3. **Data Attribute**: `document.querySelector('[data-hello]');` This test case queries the element with a data attribute named "hello" using a attribute selector. **Approaches Compared** The benchmark compares three approaches: 1. **Class Selector**: Uses the class attribute to select elements. 2. **ID Selector**: Uses the ID attribute to select elements. 3. **Data Attribute Selector**: Uses an attribute selector with a custom data attribute (in this case, "hello"). **Pros and Cons of Each Approach** * **Class Selector**: + Pros: Fast and widely supported; works well for multiple classes on an element. + Cons: Can be slower than ID selectors if the CSS selector is complex. * **ID Selector**: + Pros: Fast and reliable; works well for single elements with a unique ID. + Cons: May not work if the ID is not present or is duplicated. * **Data Attribute Selector**: + Pros: Flexible and customizable; can be used to select multiple elements with different data attributes. + Cons: May be slower than class or ID selectors due to the attribute selector's complexity. **Library** None of the test cases use a library, as they are built-in JavaScript functions (`document.querySelector()`). **Special JS Features or Syntax** The benchmark uses the following feature: * **Template Literals**: The `Html Preparation Code` contains template literals (the string with the `\t` character), which are supported in modern JavaScript engines. **Other Alternatives** If you want to write a similar benchmark, you can use other approaches such as: 1. Using `document.querySelectorAll()` instead of `querySelectorAll()`. 2. Comparing different CSS selector syntaxes or pseudo-classes. 3. Measuring the performance of different DOM traversal methods (e.g., `parentNode`, `children`, etc.). When creating your own benchmark, make sure to consider factors such as: * The target browser and version range. * The type and distribution of test data. * The number of test cases and iterations. * The reporting format and output. Keep in mind that measuring performance can be complex and nuanced; it's essential to carefully design your benchmark to ensure accurate and reliable results.
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 vs ~=
Comments
Confirm delete:
Do you really want to delete benchmark?