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.

Go to the benchmark

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser: Chrome 128

Operating system: Linux

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

querySelectorAll by Element

3K/s

querySelectorAll by Class

2K/s

querySelectorAll by Attribute

1K/s

jQuery selector by Element

543/s

jQuery selector by Class

534/s

jQuery selector by Attribute

453/s

View exact numbers

Test name	Executions per second
✓ querySelectorAll by Element	2,752 Ops/sec
querySelectorAll by Class	2,159 Ops/sec
querySelectorAll by Attribute	1,417 Ops/sec
jQuery selector by Element	543 Ops/sec
jQuery selector by Class	534 Ops/sec
jQuery selector by Attribute	453 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');