Run results for: jquery $(querySelectorAll) vs $(".class")

Run details:

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

Browser: Chrome 135

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
querySelectorAll	324032.4 Ops/sec
$(".class")	232215.9 Ops/sec
$(elem)	31191.8 Ops/sec

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js'></script>
<div>
    <ul id="menu">
        <li class="menu-item">
        </li>
        <li class="menu-item">
        </li>
        <li class="menu-item">
        </li>
        <li class="menu-item">
        </li>

    </ul>
</div>

Script Preparation code:

const elem = $(".menu-item");

Tests:

querySelectorAll
if ($(document.querySelectorAll(".test")).css("opacity") == "0.2") $(document.querySelectorAll(".test")).css("opacity", "1"); else $(document.querySelectorAll(".test")).css("opacity", "0.2");
$(".class")
if ($(".test").css("opacity") == "0.2") $(".test").css("opacity", "1"); else $(".test").css("opacity", "0.2");
$(elem)
if ($(elem).css("opacity") == "0.2") $(elem).css("opacity", "1"); else $(elem).css("opacity", "0.2");

Run results for: jquery $(querySelectorAll) vs $(".class")

querySelectorAll

$(".class")

$(elem)