Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Selector Order
(version: 3)
Test speed of ordering attribute and class selectors
Comparing performance of:
Attribute first vs Class first
Created:
8 years ago
by:
Registered User
Jump to the latest result
HTML Preparation code:
<div class="test" style=""></div> <div class="test"></div> <div class="test" style=""></div> <div class="test"></div> <div class="test" style=""></div> <div class="test"></div> <div class="test" style=""></div> <div class="test"></div> <div class="test" style=""></div> <div class="test"></div> <div class="test" style=""></div> <div class="test"></div> <div class="test" style=""></div> <div class="test"></div> <div class="test" style=""></div> <div class="test"></div> <div class="test" style=""></div> <div class="test"></div> <div class="test" style=""></div> <div class="test"></div> <div class="test" style=""></div> <div class="test"></div> <div class="test" style=""></div> <div class="test"></div>
Tests:
Attribute first
document.querySelectorAll('[style].cic_super-hidden');
Class first
document.querySelectorAll('.cic_super-hidden[style]');
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Attribute first
Class first
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):
Let's break down the provided benchmark definition and test cases to understand what is being tested, compared, and their pros/cons. **Benchmark Definition JSON** The provided JSON represents a JavaScript microbenchmark that tests the speed of ordering attribute and class selectors using `document.querySelectorAll`. The benchmark allows users to create and run custom benchmarks on their own JavaScript code. **Script Preparation Code and HTML Preparation Code** There is no script preparation code provided, which means that the user will need to write their own code to test in the benchmark. However, the HTML preparation code generates a set of elements with various styles applied to them, including classes (`test`) and inline styles (`style`). **Test Cases** The benchmark includes two test cases: 1. **Attribute first**: The `document.querySelectorAll('[style].cic_super-hidden')` query selects elements where `style` is an attribute and the value is `.cic_super-hidden`. 2. **Class first**: The `document.querySelectorAll('.cic_super-hidden[style]')` query selects elements where `.cic_super-hidden` is a class and there is a `style` attribute. **What is being compared?** These two test cases compare the performance of using attribute selectors (`[style]`) versus class selectors (`.[class]`) in JavaScript. Specifically, they are comparing: * The order in which the selector is applied: `attribute first` vs `class first` * The performance impact of using these different approaches on the DOM **Pros/Cons of each approach** 1. **Attribute first ( `[style].cic_super-hidden` )** * Pros: + May be faster since attribute selectors are often more efficient than class selectors + Can be useful for older browsers that don't support class selectors * Cons: + Can be less readable and maintainable due to the use of `style` as an attribute 2. **Class first ( `.cic_super-hidden[style]` )** * Pros: + More readable and maintainable since classes are a standardized way to group elements + Often faster than attribute selectors for modern browsers * Cons: + May be slower in older browsers that don't support class selectors **Library and special JS features** There is no explicit library mentioned, but the benchmark uses the `document.querySelectorAll` method, which is a standard JavaScript API. However, the use of `[style]` attribute syntax might not be supported in all JavaScript environments (e.g., older browsers). **Other alternatives** If you need to test other approaches or variants of these tests, you could consider using alternative methods such as: * Using `Element.prototype.querySelector` instead of `document.querySelectorAll` * Adding additional styles or classes to the elements * Changing the order of selectors in the query string (e.g., `.cic_super-hidden [style]`) * Using a different element selector syntax (e.g., `>` instead of `[style]`)
Related benchmarks:
Jquery each vs selector map
querySelectorAll vs getElementsByClassName Test
querySelectorAll vs getElementsByClassName Test2
performance js elements selector
Comments
Confirm delete:
Do you really want to delete benchmark?