Native DOM functions vs jQuery

JavaScript performance comparison

Test case created by tswistak

Preparation code

<header id='header-elem'>
    <div class='div-class'>
        <span id='span-elem'></span>
    </div>
</header>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    

Preparation code output

<header id='header-elem'> <div class='div-class'> <span id='span-elem'></span> </div> </header>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
getElementById
document.getElementById('span-elem');
pending…
querySelector by id
document.querySelector('#span-elem');
pending…
jQuery by id
$('#span-elem');
pending…
getElementsByClassName
document.getElementsByClassName('div-class');
pending…
querySelectorAll by class
document.querySelectorAll('.div-class');
pending…
jQuery by class
$('.div-class');
pending…
Advanced selector in querySelector
document.querySelector('#header-elem>.div-class span');
pending…
Advanced selector in jQuery
$('#header-elem>.div-class span');
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 Comments