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 (Android 14; Mobile; rv:129.0) Gecko/129.0 Firefox/129.0

Browser: Firefox Mobile 129

Operating system: Android

Device Platform: Mobile

Date tested: 2 years ago

Benchmark engine: Benchmark.js

jQuery selector by Class

5K/s

jQuery selector by Element

5K/s

querySelectorAll by Element

3K/s

querySelectorAll by Class

3K/s

querySelectorAll by Attribute

2K/s

jQuery selector by Attribute

2K/s

View exact numbers

Test name	Executions per second
✓ jQuery selector by Class	5,336 Ops/sec
jQuery selector by Element	5,164 Ops/sec
querySelectorAll by Element	3,254 Ops/sec
querySelectorAll by Class	2,505 Ops/sec
querySelectorAll by Attribute	2,377 Ops/sec
jQuery selector by Attribute	1,562 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');