Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Attribute Selector vs Class Selector vs ID Selector
(version: 0)
Comparing performance of:
Class vs ID vs 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.querySelector('#hello');
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
Attribute
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
6 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:147.0) Gecko/20100101 Firefox/147.0
Browser/OS:
Firefox 147 on Mac OS X 10.15
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=624719" width="100%" height="500px"></iframe>
ID
9.8M/s
Class
9.2M/s
Attribute
8.2M/s
View exact numbers
Test name
Executions per second
✓
ID
9,835,628 Ops/sec
Class
9,168,764 Ops/sec
Attribute
8,191,770 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the provided JSON and explain what's being tested, the different approaches compared, their pros and cons, and other considerations. **Benchmark Definition** The benchmark definition is a simple JavaScript code snippet that uses the `document.querySelector()` method to select an HTML element based on its class, ID, or attribute value. The goal is to compare the performance of these three approaches: 1. **Class Selector**: `document.querySelector('.hello');` 2. **ID Selector**: `document.querySelector('#hello');` 3. **Attribute Selector**: `document.querySelector('[data="hello"]');` **Options Compared** The benchmark compares the execution time of each approach on different browsers and devices. * **Browsers**: Chrome 122 (on Desktop) * **Devices**: Desktop platforms * **Operating Systems**: Windows **Pros and Cons of Different Approaches:** 1. **Class Selector**: * Pros: + Fast and efficient, as it only requires a single CSS selector. + Can be used for both static and dynamic elements. * Cons: + May not work well if the class is dynamically added or removed. 2. **ID Selector**: * Pros: + Works reliably, even when the element has multiple IDs (e.g., `id="hello-123"`). + Can be used for both static and dynamic elements. * Cons: + May slow down performance if there are many ID-selectable elements on the page. 3. **Attribute Selector**: * Pros: + Works even when the element has multiple attributes (e.g., `[data="hello"]`). + Can be used for both static and dynamic elements. * Cons: + May slow down performance if there are many attribute-selectable elements on the page. **Library Used** In this benchmark, no libraries are explicitly mentioned. However, `document.querySelector()` is a part of the DOM (Document Object Model) API, which is a built-in JavaScript API for working with HTML and XML documents. **Special JS Features or Syntax** None mentioned. **Other Considerations** When comparing these approaches, it's essential to consider the following: * **CSS Selectors**: The performance difference between class selectors, ID selectors, and attribute selectors depends on the CSS selector engine used by the browser. Modern browsers like Chrome use a combination of CSS parser and selector algorithms to optimize performance. * **Element Count**: If there are many elements with these attributes or IDs, the performance difference may be less noticeable due to the overhead of DOM manipulation. * **Browser Updates**: Benchmark results may vary across different browser versions and architectures. **Alternatives** If you want to test similar approaches, consider using benchmarks like: * `element-from-viewport` (for selecting elements based on their position in the viewport) * `css-selector-performance` (for comparing CSS selector performance) Keep in mind that these alternatives might have slightly different use cases or requirements. MeasureThat.net's benchmark is well-suited for testing class selectors, ID selectors, and attribute selectors in a general-purpose scenario.
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?