Native DOM functions vs jQuery

Benchmark created by tswistak on

Preparation HTML

<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>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
document.getElementById('span-elem');
ready
querySelector by id
document.querySelector('#span-elem');
ready
jQuery by id
$('#span-elem');
ready
getElementsByClassName
document.getElementsByClassName('div-class');
ready
querySelectorAll by class
document.querySelectorAll('.div-class');
ready
jQuery by class
$('.div-class');
ready
Advanced selector in querySelector
document.querySelector('#header-elem>.div-class span');
ready
Advanced selector in jQuery
$('#header-elem>.div-class span');
ready

Revisions

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