jQuery DOM Traversal Speed

Benchmark created by Matt McDonald on

Description

Comparing complex DOM traversal speed in jQuery via class names vs ids.

Preparation HTML

<div></div>
<div></div>
<div></div>
<div id="a" class="_a">
    <div></div>
    <div></div>
    <div></div>
    <div id="b" class="_b">
        <div></div>
        <div></div>
        <div id="c" class="_c">
            <div></div>
            <span></span>
            <span></span>
            <span></span>
            <span id="foo" class="_foo">Hello, World!</span>
        </div>
    </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var el;
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Tag-specific traversal by class name
el = $('div._a div._b div._c span._foo');
ready
Tag-specific traversal by id
el = $('div#a div#b div#c span#foo');
ready
Non-tag-specific traversal by id
el = $('#a #b #c #foo');
ready
Tag-specific singular id traversal
el = $('span#foo');
ready
Non-tag-specific singular id traversal
el = $('#foo');
ready

Revisions

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