Complex DOM - jQuery selectors VS Traversal methods.

JavaScript performance comparison

Revision 3 of this test case created

Preparation code

<script src="//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

TEST

TITLE

stuff

stuff

TITLE

stuff

stuff

Test runner

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

Java applet disabled.

Testing in unknown unknown
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('#menu').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…
selector with context
jQuery(document).ready(function() {
 jQuery('.test3', '#menu');
});
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. Here’s a list of current revisions for this page:

0 comments

Add a comment