jQuery vs Native Element Performance (v24)

Revision 24 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 = {
    idTest: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
Test 18
testObj.elemTest(18); // $('ul#ul');
ready
Test 13
testObj.elemTest(13); // document.querySelector('#foo .span');
ready
Test 11
testObj.elemTest(11); // $('span', '#foo');
ready
Test 8
testObj.elemTest(8); // document.getElementById('foo');
ready
Test 2
testObj.elemTest(2); // document.getElementsByTagName('div');
ready
Test 6
testObj.elemTest(6); // document.querySelectorAll('.li');
ready
Test 12
testObj.elemTest(12); //  document.getElementById('foo').getElementsClassNameId('span');
ready
Test 10
testObj.elemTest(10); // $('#foo').find('span');
ready
Test 14
testObj.elemTest(14); // $('span#hidden');
ready
Test 17
testObj.elemTest(17); // document.querySelector('ul.ul');
ready
Test 3
testObj.elemTest(3); // document.querySelectorAll('div');
ready
Test 16
testObj.elemTest(16); // $('ul.ul');
ready
Test 15
testObj.elemTest(15); // document.querySelector('span#foo');
ready
Test 9
testObj.elemTest(9); // document.querySelector('#foo');
ready
Test 7
testObj.elemTest(7); // $('#foo');
ready
Test 4
testObj.elemTest(4); // $('.li');
ready
Test 1
testObj.elemTest(1); // $('div');
ready
Test 19
testObj.elemTest(19); // document.querySelector('ul#ul');
ready
Test 5
testObj.elemTest(5); // document.getElementsByClassName('li');
ready

Revisions

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