Caching vs Nested lookup

JavaScript performance comparison

Test case created by borisli

Preparation code

<!--Sample DOM-->
<header>
<h1>Sample DOM</h1>
</header>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<div id="main">
  <div id="content">
  <div id="myDiv" class="myClass">
  <p>Sample content of non-consequence</p>
  </div>
  </div>
</div>
<footer>
<a href="#">Terms</a>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script>
Benchmark.prototype.setup = function() {
    var $root = $("#main")
    var $child = $(".myClass");
};
</script>

Preparation code output

Sample DOM

Sample content of non-consequence

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Child lookup in cached parent
var test = $root.find("myClass");
test.css('color', '#EFEFEF');
pending…
Cached Child
$child.css('color', '#EFEFEF');
pending…

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

Compare results of other browsers

0 comments

Add a comment