Complex DOM - jQuery selectors VS Traversal methods.

JavaScript performance comparison

Revision 5 of this test case created by

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="wrap">
    <div id="header">
        <img class="logo" src="/logo.png" alt="test" />
        <ul id="menu">
            <li class="test1 test2"><a class="test3" href="#"></a></li>
            <li class="test1"><a class="test3" href="#"></a></li>
            <li class="test1"><a class="test3" href="#"></a></li>
        </ul>
    </div>
    <div id="content">
        <h1>TEST</h1>
        <div class="section">
            <div class="top">
                <h2>TITLE</h2>
                <p class="tagline">stuff</p>
            </div>
            <div class="bottom">
                <p>stuff</p>
                <ul>
                    <li><a class="test3" href="#"></a></li>
                    <li><a class="test3" href="#"></a></li>
                </ul>
            </div>
        </div>
        <div class="section">
            <div class="top">
                <h2>TITLE</h2>
                <p class="tagline">stuff</p>
            </div>
            <div class="bottom">
                <p>stuff</p>
                <ul>
                    <li><a class="test3" href="#"></a></li>
                    <li><a class="test3" href="#"></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script>
  var $ = jQuery;
</script>
    

Preparation code output

<div id="wrap"> <div id="header"> <img class="logo" src="/logo.png" alt="test" /> <ul id="menu"> <li class="test1 test2"><a class="test3" href="#"></a></li> <li class="test1"><a class="test3" href="#"></a></li> <li class="test1"><a class="test3" href="#"></a></li> </ul> </div> <div id="content"> <h1>TEST</h1> <div class="section"> <div class="top"> <h2>TITLE</h2> <p class="tagline">stuff</p> </div> <div class="bottom"> <p>stuff</p> <ul> <li><a class="test3" href="#"></a></li> <li><a class="test3" href="#"></a></li> </ul> </div> </div> <div class="section"> <div class="top"> <h2>TITLE</h2> <p class="tagline">stuff</p> </div> <div class="bottom"> <p>stuff</p> <ul> <li><a class="test3" href="#"></a></li> <li><a class="test3" href="#"></a></li> </ul> </div> </div> </div> </div> <script> var $ = jQuery; </script>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
.find() - menu elements with class
jQuery(document).ready(function() {
 jQuery('#menu').find('.test3');
});
pending…
.children() - menu elements with class
jQuery(document).ready(function() {
 jQuery('#menu').children('li').children('.test3');
});
pending…
Selector - menu elements with class
jQuery(document).ready(function() {
 jQuery('#menu li .test3');
});
pending…
.find() - body elements with class
jQuery(document).ready(function() {
 jQuery('#content').find('.test3');
});
pending…
.children() - body elements with class
jQuery(document).ready(function() {
 jQuery('#content').children('.section').children('.bottom').children('ul').children('li').children('.test3');
});
pending…
Selector - body elements with class (1)
jQuery(document).ready(function() {
 jQuery('#content .test3');
});
pending…
Selector - body elements with class (2)
jQuery(document).ready(function() {
 jQuery('#content .section .bottom ul li .test3');
});
pending…
jQuery(document).ready(function() {
 jQuery('.test3', '#menu');
});
pending…
selector all 1
jQuery(document).ready(function() {
 $(document.querySelectorAll("#menu .test3"));
});
pending…
selector all 2
jQuery(document).ready(function() {
 $(document.querySelectorAll("#content .section .bottom ul li .test3"));
});
pending…

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.

0 Comments

TEST

TITLE

stuff

stuff

TITLE

stuff

stuff