Run results for: querySelectorAll vs JQuery

Compares the performance of querySelectorAll against JQuery for selecting elements. For class selector, getElementsByClassName is the best. For element selector, getElementsByTagName is the best.

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.83 Safari/537.36

Browser: Chrome 99

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
querySelectorAll by Attribute	2077.6 Ops/sec
jQuery selector by Attribute	584.2 Ops/sec
querySelectorAll by Class	4760.0 Ops/sec
jQuery selector by Class	855.0 Ops/sec
querySelectorAll by Element	5257.7 Ops/sec
jQuery selector by Element	878.8 Ops/sec

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<content id="demo">Hello World!</content>

Script Preparation code:

let components = '';
for (let i=0; i<10000; i+=1) {
    components += '<div class="component" data-component="component' + i + '">Content ' + i + '</div>'
}
document.getElementById("demo").innerHTML = components;

Tests:

querySelectorAll by Attribute
let components = document.querySelectorAll('[data-component]');
jQuery selector by Attribute
let components = $('[data-component]');
querySelectorAll by Class
let components = document.querySelectorAll('.component');
jQuery selector by Class
let components = $('.component');
querySelectorAll by Element
let components = document.querySelectorAll('div');
jQuery selector by Element
let components = $('div');

Run results for: querySelectorAll vs JQuery

Compares the performance of querySelectorAll against JQuery for selecting elements. For class selector, getElementsByClassName is the best. For element selector, getElementsByTagName is the best.

querySelectorAll by Attribute

jQuery selector by Attribute

querySelectorAll by Class

jQuery selector by Class

querySelectorAll by Element

jQuery selector by Element