Preparation code

<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="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script>
  Benchmark.prototype.setup = function() {
    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
                    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);
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

testObj.elemTest(0); // $('span');

testObj.elemTest(1); // $('span#hidden'); Span element with an ID of hidden

testObj.elemTest(2); // $('#foo').find('span');

testObj.elemTest(3); // $('span', '#foo');

testObj.elemTest(4); // document.getElementsByTagName('span');

testObj.elemTest(5); // document.querySelector('span'); Doesn't work in old browsers

testObj.elemTest(6); // document.querySelectorAll('div'); Same usage restrictions as above.  Get all div

testObj.elemTest(7); // $('div');

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published by Brian Frichette on 17th February 2012
• Revision 2: published by dotherightthing on 22nd June 2012
• Revision 3: published by Aaron M. on 8th March 2013

0 comments