jQuery Cached Set

JavaScript performance comparison

Revision 45 of this test case created

Info

Compare performance of cached vs repeated element selections

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div>
<div>
<div>
<div>
<div id="top" class="mydiv" name="top">
  <p id="para_1" class="mytext">
    Paragraph one
  </p>
  <p id="para_2" class="mytext">
    Paragraph two
  </p>
  <p id="para_3" class="mytext" name="3">
    Paragraph three
  </p>
  <span id="span_1" class="mytext">
    Text in a span
  </span>
</div>
</div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<div>
<div id="top1" class="mydiv" name="top1">
<p id="para_4" class="mytext">
  Paragraph four
</p>
<p id="para_5" class="mytext">
  Paragraph five
</p>
<p id="para_6" class="mytext1">

  Paragraph six
<p id="para_7" class="mytext" name="7">
  Paragraph seven
</p>
</p>
</div>
</div>
</div>
</div>
</div>
<script>
  var parent_el = jQuery(document.getElementById("top"));
  var cached = parent_el.find('p.mytext1');
</script>

Preparation code output

Paragraph one

Paragraph two

Paragraph three

Text in a span

Paragraph four

Paragraph five

Paragraph six

Paragraph seven

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
element by id
jQuery('#para_3')
pending…
parent by id
jQuery("#top").find('#para_3')
pending…
cached parent
parent_el.find('#para_3')
pending…
single selector
jQuery("#top #para_3")
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