Run results for: querySelector vs JQuery

Compares the performance of querySelector 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 (Windows NT 10.0; Win64; x64; rv:126.0) Gecko/20100101 Firefox/126.0

Browser: Firefox 126

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

querySelectorAll by Class

7.3M/s

querySelectorAll by Element

7.2M/s

querySelectorAll by Attribute

6.6M/s

jQuery selector by Element

15K/s

jQuery selector by Class

15K/s

jQuery selector by Attribute

6K/s

View exact numbers

Test name	Executions per second
✓ querySelectorAll by Class	7,264,588 Ops/sec
querySelectorAll by Element	7,236,082 Ops/sec
querySelectorAll by Attribute	6,625,330 Ops/sec
jQuery selector by Element	15,294 Ops/sec
jQuery selector by Class	15,130 Ops/sec
jQuery selector by Attribute	6,079 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.querySelector('[data-component]');
jQuery selector by Attribute
let components = $('[data-component]');
querySelectorAll by Class
let components = document.querySelector('.component');
jQuery selector by Class
let components = $('.component');
querySelectorAll by Element
let components = document.querySelector('div');
jQuery selector by Element
let components = $('div');