jQuery vs Native Element Performance (v7)

Revision 7 of this benchmark created 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://code.jquery.com/jquery-2.1.0.min.js"></script>

Setup

var testObj;
  
  (function($){
      testObj = {
          idTest		:   function ( test ) {
              switch ( test ) {
                  case 0:
                      return $('#foo');
                  case 1:
                      return document.getElementById('foo'); // Native ID
                  case 2:
                      return $('#bar'); // Straight to child (ID)
                  case 3:
                      return $('#foo').find('#bar'); // Grab top ID and find child ID
                  case 4:
                      return $('#bar', '#foo'); // Context
                  case 5:
                      return document.getElementById('bar'); // Native ID
                  case 6:
                      return document.querySelector('#foo'); // querySelector
                  case 7:
                      return document.querySelector('#bar');
                  default:
                      break;
              }
          },
          elemTest	:   function ( test ) {
              switch ( test ) {
                  case 0:
                      return $('span');
                  case 1:
                      return $('span#hidden'); // Span element with an ID of hidden
                  case 2:
                      return $('#foo').find('span'); // Find span of #foo
                  case 3:
                      return $('span', '#foo'); // Context
                  case 4:
                      return document.getElementsByTagName('span'); // Native
                  case 5:
                      return document.querySelector('span'); // querySelector
                  case 6:
                      return document.querySelectorAll('div'); // querySelectorAll
                  case 7:
                      return $('div'); // jQuery return all DIVs
  case 8:
    return $('#hidden')
  break;
                  default:
                      break;
              }
          },
          classTest	:   function ( test ) {
              switch ( test ) {
                  case 0:
                      return $('.bar'); // Straight to .bar, one level down from #foo
                  case 1:
                      return $('#foo').find('.bar'); // Grab #foo, find .bar
                  case 2:
                      return $('.bar', '#foo'); // Context
                  case 3:
                      return $('div.bar') // Div with a class of bar
                  case 4:
                      return $('div').filter('.bar'); // Filter class from elem
                  case 5:
                      return $('.li'); // Get all .li, two levels down from #foo
                  case 6:
                      return $('li.li'); // List item with a class of li
                  case 7:
                      return $('#ul').find('.li'); // id #ul, find class of li
                  case 8:
                      return $('li').filter('.li') // Get all list items and filter those with a class of .li
                  case 9:
                      return document.getElementsByClassName('bar'); // Native, doesn't work in old IE
                  case 10:
                      return document.querySelectorAll('.bar') // querySelectorAll
                  default:
                      break;
              }
          }
      };
  })(jQuery);

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery Single Element
testObj.elemTest(0); // $('span');
ready
jQuery Span and ID
testObj.elemTest(1); // $('span#hidden'); Span element with an ID of hidden
ready
jQuery grab #foo then find span
testObj.elemTest(2); // $('#foo').find('span');
ready
jQuery ID and Element Context
testObj.elemTest(3); // $('span', '#foo');
ready
Native Element Selection
testObj.elemTest(4); // document.getElementsByTagName('span');
ready
Native querySelector
testObj.elemTest(5); // document.querySelector('span'); Doesn't work in old browsers
ready
Native querySelectorAll
testObj.elemTest(6); // document.querySelectorAll('div'); Same usage restrictions as above.  Get all div
ready
jQuery version of querySelectorAll
testObj.elemTest(7); // $('div');
ready
#hidden
testObj.elemTest(8); // $('#hidden')
ready

Revisions

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