<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>var test = document.querySelectorAll('[data-attribute="test"]');var test = document.querySelectorAll('.test');--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| data attribute | |
| class name |
| Test name | Executions per second |
|---|---|
| data attribute | 231367.8 Ops/sec |
| class name | 555383.6 Ops/sec |
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:
var test = document.querySelectorAll('[data-attribute="test"]');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:
[data-attribute="test"] syntax to query elements..test CSS selector to query elements.Comparison of options:
There are pros and cons for each approach:
Data attribute:
Pros:
Cons:
Class name:
Pros:
Cons:
Other considerations:
Benchmark result:
The latest benchmark result shows:
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.
