Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
querySelectorAll data attribute vs class name 10-20-21
(version: 0)
Comparing performance of:
data attribute vs class name
Created:
4 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div class="row bg-teal-and-lg-icons-fade"> <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2"> <div class="splash-zone fg-snc-ivory hover-box-container"> <h2>THIS IS MY TITLE</h2> <h4> Chroma Key </h4> <a href="https://google.com" class="btn btn-primary btn-lg text-uppercase">Learn More</a> </div> </div> </div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div class="test" data-attribute="test"></div> <div id="main-article" class="article-content retro-folders"> <p></p> <div class="quoteright" style="width:347px;"><a class="twikilink" href="/pmwiki/pmwiki.php/Series/Smallville" title="/pmwiki/pmwiki.php/Series/Smallville"> <div class="lazy_load_img_box" style="padding-top:84.57%"><img src="https://static.tvtropes.org/pmwiki/pub/images/greenscreen_377.jpg" class="embeddedimage" border="0" alt="https://static.tvtropes.org/pmwiki/pub/images/greenscreen_377.jpg" width="350" height="296"></div> </a></div> <p></p> <div class="indent"><em>"He has the power to rear-project major cities!"</em> <div class="indent">— <strong><a class="twikilink" href="/pmwiki/pmwiki.php/Series/MysteryScienceTheater3000" title="/pmwiki/pmwiki.php/Series/MysteryScienceTheater3000">Mike Nelson</a></strong> on <em><a class="twikilink" href="/pmwiki/pmwiki.php/Film/PumaMan" title="/pmwiki/pmwiki.php/Film/PumaMan">Puma Man</a></em> </div> </div> <p>More commonly known as <em>green screen</em>, the process by which a subject filmed on a camera can be seamlessly inserted into a scene generated by other means. It relies on filming the subject in front of a solid-color background — usually green or blue — and causing the editing system to replace that color with the background signal. </p> <p>This technique is <a class="twikilink" href="/pmwiki/pmwiki.php/Main/OlderThanTheyThink" title="/pmwiki/pmwiki.php/Main/OlderThanTheyThink">Older Than They Think</a>. Before the existence of computer editing, the effect could be achieved using rear projection, double-exposing the film, or a <a class="twikilink" href="/pmwiki/pmwiki.php/Main/MatteShot" title="/pmwiki/pmwiki.php/Main/MatteShot">Matte Shot</a>. </p> <p>The technique is usually used to composite the subject into a computer generated environment, but other live action footage, matte paintings, traditional animation, or some combination of all can be used also. </p> <p>The color used is now entirely arbitrary. Blue was a popular choice in the early days of color motion pictures, because it is complementary to the reds found in human skin. Green became popular because digital editing systems can isolate green with less light in the background, and because lime green is less common than bright blue in costuming<span class="notelabel" onclick="togglenote('note0dv3s');" style="cursor: pointer;"><sup>note </sup></span><span id="note0dv3s" class="inlinefolder font-s" isnote="true" onclick="togglenote('note0dv3s');" style="display: none; cursor: pointer;"> There were also a few actors who also had Blue Screen-colored eyes; <em><a class="twikilink" href="/pmwiki/pmwiki.php/Film/BrokenArrow1996" title="/pmwiki/pmwiki.php/Film/BrokenArrow1996">Broken Arrow (1996)</a></em> offers an example, where an astute viewer can occasionally see special effects in John Travolta's irises.</span> Magenta is sometimes used, as is black, but the latter is problematic, as it's almost impossible to shoot a person without having some black visible on their person, in eyes or shadows. </p>
Tests:
data attribute
var test = document.querySelectorAll('[data-attribute="test"]');
class name
var test = document.querySelectorAll('.test');
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
data attribute
class name
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 explain what's being tested, compared options, their pros and cons, and other considerations. **Benchmark Definition:** The benchmark is defined by two test cases: 1. `var test = document.querySelectorAll('[data-attribute="test"]');` 2. `var test = document.querySelectorAll('.test');` These two tests are designed to measure the performance of querying elements using data attributes versus class names in JavaScript. **What's being tested:** The benchmark is testing the performance difference between two approaches: 1. **Data attribute**: Using the `[data-attribute="test"]` syntax to query elements. 2. **Class name**: Using the `.test` CSS selector to query elements. **Comparison of options:** There are pros and cons for each approach: **Data attribute:** Pros: * More flexible and customizable than class names * Can be used to store arbitrary data in a self-describing way Cons: * May have performance implications due to the overhead of parsing and evaluating CSS selectors * Not all browsers support data attributes (although most modern ones do) **Class name:** Pros: * Fast and efficient, as it's just a simple string comparison * Widely supported by most browsers Cons: * Less flexible and customizable than data attributes * Limited to specific classes or IDs **Other considerations:** * The benchmark is using Chrome 94 as the browser, which might not be representative of other browsers. * The test cases are very similar, with only the query syntax changing. This might make it difficult to draw conclusions about real-world usage scenarios. **Benchmark result:** The latest benchmark result shows: 1. **Class name**: Executions per second (EPS) = 555383.625 2. **Data attribute**: EPS = 231367.8125 This suggests that querying elements using class names is generally faster than using data attributes. However, this might not be representative of real-world usage scenarios, as the test cases are very similar and the benchmark only runs once. **Conclusion:** In conclusion, while class names seem to have a slight performance advantage over data attributes in this specific benchmark, it's essential to consider the broader implications and context of your use case. Data attributes can provide more flexibility and customization, but might come at a slightly higher performance cost. Ultimately, the choice between these two approaches depends on your specific requirements and trade-offs.
Related benchmarks:
querySelectorAll data attribute vs class name
querySelectorAll data attribute vs class name 2
querySelectorAll data attribute vs class name 4
my querySelectorAll data attribute vs class name 2
Comments
Confirm delete:
Do you really want to delete benchmark?