jQuery vs Native Element Performance (v28)

Revision 28 of this benchmark created by raatjetoe on

Preparation HTML

<div id="foo">
            <h6>Element</h6>
            <div class="bar">Class</div>
            <div id="bar">Sub-ID</div>
            <input type="text" value="FooBar">
            <span id="hidden" style="display:none;">Hidden</span>
            <ul id="ul" class="ul">
                <li class="li">One</li>
                <li class="li">Two</li>
                <li class="li">Three</li>
                <li class="li">Four</li>
                <li class="li">Five</li>
                <li class="li">Six</li>
            </ul>
        </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Setup

var testObj;
  var d = document;
  
  (function($){
   testObj = {
    testObj:function ( test ) {
     switch(test){
  
  case 1:return $('div');
  case 2:return d.getElementsByTagName('div');
  case 3:return d.querySelectorAll('div');    
  
  case 4:return $('.li');
  case 5:return d.getElementsByClassName('li');
  case 6:return d.querySelectorAll('.li');    
  
  case 7:return $('#foo');
  case 8:return d.getElementById('foo'); 
  case 9:return d.querySelector('#foo'); 
  
  case 10:return $('#foo').find('span'); 
  case 11:return $('span', '#foo');
  case 12:return d.getElementById('foo').getElementsClassNameId('span'); 
  case 13:return d.querySelector('#foo .span');
  
  case 14:return $('span#hidden'); 
  case 15:return d.querySelector('span#foo');
  case 16:return $('ul.ul'); 
  case 17:return d.querySelector('ul.ul');
  case 18:return $('ul#ul'); 
  case 19:return d.querySelector('ul#ul');
  
  default: break;
     }
    }
   };
  })(jQuery);

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById('foo');
testObj.elemTest(8);
ready
querySelectorAll('.li');
testObj.elemTest(6);
ready
querySelector('#foo');
testObj.elemTest(9);
ready
querySelectorAll('div');
testObj.elemTest(3);
ready
$('#foo');
testObj.elemTest(7);
ready
$('span#hidden');
testObj.elemTest(14);
ready
$('.li');
testObj.elemTest(4);
ready
$('div');
testObj.elemTest(1);
ready
$('ul#ul');
testObj.elemTest(18);
ready
querySelector('#foo .span');
testObj.elemTest(13);
ready
querySelector('span#foo');
testObj.elemTest(15);
ready
$('ul.ul');
testObj.elemTest(16);
ready
getElementById('foo').getElementsClassNameId('span');
testObj.elemTest(12);
ready
getElementsByClassName('li');
testObj.elemTest(5);
ready
$('#foo').find('span');
testObj.elemTest(10);
ready
getElementsByTagName('div');
testObj.elemTest(2);
ready
$('span', '#foo');
testObj.elemTest(11);
ready
querySelector('ul#ul');
testObj.elemTest(19);
ready
querySelector('ul.ul');
testObj.elemTest(17);
ready

Revisions

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