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 (Macintosh; Intel Mac OS X 10.15; rv:137.0) Gecko/20100101 Firefox/137.0

Browser: Firefox 137

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

jQuery selector by Class

17K/s

jQuery selector by Element

17K/s

querySelectorAll by Attribute

13K/s

querySelectorAll by Class

13K/s

querySelectorAll by Element

11K/s

jQuery selector by Attribute

8K/s

View exact numbers

Test name	Executions per second
✓ jQuery selector by Class	17,347 Ops/sec
jQuery selector by Element	17,301 Ops/sec
querySelectorAll by Attribute	12,841 Ops/sec
querySelectorAll by Class	12,718 Ops/sec
querySelectorAll by Element	10,667 Ops/sec
jQuery selector by Attribute	7,701 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');