jQuery Cached Set

JavaScript performance comparison

Revision 26 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 id="top" class="mydiv">
  <p id="para_1" class="mytext">
    Paragraph one
  </p>
  <p id="para_2" class="mytext">
    Paragraph two
  </p>
  <p id="para_3" class="mytext">
    Paragraph three
  </p>
  <span id="span_1" class="mytext">
    Text in a span
  </span>
</div>
<p id="para_4" class="mytext">
  Paragraph four
</p>
<p id="para_5" class="mytext">
  Paragraph five
</p>
<p id="para_6" class="mytext">
  Paragraph six
</p>
<script>
  var parent_el = document.getElementById("top");
  var cached = jQuery(parent_el).find('p.mytext');
</script>

Preparation code output

Paragraph one

Paragraph two

Paragraph three

Text in a span

Paragraph four

Paragraph five

Paragraph six

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Cached elements
cached.css('color', '#ff0000');
cached.css('text-decoration', 'underline');
cached.css('background-color', '#eeeeee');
pending…
No cache
jQuery('#top').find('p.mytext').css('color', '#ff0000');
jQuery('#top').find('p.mytext').css('text-decoration', 'underline');
jQuery('#top').find('p.mytext').css('background-color', '#eeeeee');
pending…
Cache2
cached.css('color', '#ff0000').css('text-decoration', 'underline').css('background-color', '#eeeeee');
pending…
Cache3
cached.css({
  "color": "#ff0000",
  "text-decoration": "underline",
  "background-color": "#eeeeee"
});
pending…
Cache4
jQuery('#top').find('p.mytext').css('color', '#ff0000').css('text-decoration', 'underline').css('background-color', '#eeeeee');
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:

2 comments

ann commented :

Spend an exorbitant amount of money on your first designer <a href="http://www.ferragamobagsale.com/">Ferragamo Handbag</a> is no joke. It is best to choose a design for your designer bag timeless and classic first. A good place to start, is <a href="http://www.ferragamobagsale.com/">Ferragamo Bag</a>, the elegant and sophisticated styles that happen to have never checked.

http://www.ferragamobagsale.com

lanvin bag commented :

Current trends, classic black <a href="http://www.lanvinhandbagstore.com/">Lanvin bag</a> never goes out of style, and it is the season. You can put a black <a href="http://www.lanvinhandbagstore.com/">Lanvin handbag</a>, evening out to see a movie or in a Sunday market. Like a little black dress, a black leather bag is never a wrong choice. It still is a great classic bag that every girl should have in her closet.Link:http://www.lanvinhandbagstore.com/

Add a comment