Benchmark: querySelectorAll data attribute vs class name 10-20-21

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&nbsp;</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>

Previous results

Test case name	Result
data attribute
class name

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36

Browser/OS: Chrome 94 on Windows

View result in a separate tab

Test name	Executions per second
data attribute	231367.8 Ops/sec
class name	555383.6 Ops/sec

querySelectorAll data attribute vs class name 10-20-21 (version: 0)

Comparing performance of: data attribute vs class name

Created: 2 years ago by: Guest

Jump to the latest result

data attribute

class name

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A