Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Class vs Attribute selector modern
(version: 0)
Benchmark.js
Comparing performance of:
Class selector vs Attribute selector
Created:
3 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<input type="text" class="search" data-search-input/> <div class="results" data-results> <div class="element" data-result-element>Hello</div> <div class="element" data-result-element>World</div> <div class="element" data-result-element>Everyone</div> </div>
Tests:
Class selector
let list = document.querySelector('.results'); let list_item = document.querySelector('.element'); let input = document.querySelector('.search');
Attribute selector
let list = document.querySelector('[class="results"]'); let list_item = document.querySelector('[class="element"]'); let input = document.querySelector('[class="search"]');
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Class selector
Attribute selector
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_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36
Browser/OS:
Chrome 146 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=626866" width="100%" height="500px"></iframe>
Class selector
11.2M/s
Attribute selector
4.5M/s
View exact numbers
Test name
Executions per second
✓
Class selector
11,198,585 Ops/sec
Attribute selector
4,492,854 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided JSON data and explain what's being tested, compared, and their pros/cons. **Benchmark Definition** The benchmark definition is a set of instructions that defines how to prepare the environment for testing. In this case, it includes: * A script preparation code: This section is empty, which means no custom JavaScript code needs to be executed before running the tests. * An HTML preparation code: This section defines an HTML page with three elements: `input` (a text input), `list` (an element with class `results`), and multiple `element` elements (each with class `element`). The presence of these elements is expected during testing. **Individual Test Cases** There are two test cases defined: 1. **Class selector** * Benchmark Definition: `let list = document.querySelector('.results'); let list_item = document.querySelector('.element'); let input = document.querySelector('.search');` * Description: This test case uses the `querySelector` method to select elements based on their class names. 2. **Attribute selector** * Benchmark Definition: `let list = document.querySelector('[class="results"]'); let list_item = document.querySelector('[class="element"]'); let input = document.querySelector('[class="search"]');` * Description: This test case uses the `querySelector` method with attribute selectors to select elements based on their class attributes. **Comparison and Pros/Cons** Both test cases use the `querySelector` method, which is a part of the Document Object Model (DOM). However, they differ in how they specify the selector: * **Class selector**: Uses dot notation (`.`) followed by the class name. This approach is more readable and concise. + Pros: Easier to read and maintain, especially for smaller classes or attributes. + Cons: May be slower due to the DOM query optimization algorithm (e.g., using caching). * **Attribute selector**: Uses square brackets `[]` followed by the attribute name and value. This approach is more flexible but also more verbose. + Pros: Can match elements based on any attribute, regardless of its position or order in the HTML document. + Cons: May be slower due to the DOM query optimization algorithm and can lead to more complex selectors. **Library** There is no explicit library mentioned in the provided data. However, the `querySelector` method is part of the W3C standard and is widely supported by most modern browsers. **Special JS Features/Syntax** None are explicitly mentioned in this specific benchmark definition. However, note that if you were to create a new test case or benchmark using these methods, you might use more advanced techniques like: * Using `getAttribute` and `setAttribute` instead of attribute selectors for more fine-grained control. * Utilizing CSS selectors, such as `querySelectorAll`, for more complex selection logic. * Leveraging the `DOMQuerySelectorOptions` interface for custom query optimizations. **Other Alternatives** If you wanted to test different approaches or libraries, consider exploring: * Other DOM query methods like `getElementsByClassName` or `getElementById`. * CSS selectors for more precise and flexible element selection (e.g., using `querySelectorAll`). * Browser-specific APIs like `window.getComputedStyle` for CSS styles or attribute access. * Library-based solutions like jQuery or other utility libraries that provide a more convenient, high-level API for DOM manipulation. Keep in mind that the choice of approach depends on your specific requirements and performance considerations.
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 v2
DataAttribute vs Class Selector vs ID Selector vs ~=
Comments
Confirm delete:
Do you really want to delete benchmark?