jQuery Cached Set (v22)

Revision 22 of this benchmark created on

Preparation HTML

<script src="https://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>
<style type="text/css">
 .stylize_p {
   color: #ff0000;
   text-decoration: underline;
   background-color: #eeeeee;
 }
</style>
<script>
  var parent = $('#top');
  var mytext = $('p.mytext');
  var cached = parent.find('p.mytext');
  var cache2 = $('p.mytext');
  var cache3 = $('#top').children('.mytext');
  var cache4 = $('p').hasClass('mytext');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Cache
cached.css('color', '#ff0000');
cached.css('text-decoration', 'underline');
cached.css('background-color', '#eeeeee');
ready
Cache 2
cache2.css('color', '#ff0000');
cache2.css('text-decoration', 'underline');
cache2.css('background-color', '#eeeeee');
ready
Chain
cached.css('color', '#ff0000').css('text-decoration', 'underline').css('background-color', '#eeeeee');
ready
Chain 2
cache2.css('color', '#ff0000').css('text-decoration', 'underline').css('background-color', '#eeeeee');
ready
CSS
cached.css({
  "color": "#ff0000",
  "text-decoration": "underline",
  "background-color": "#eeeeee"
});
ready
CSS 2
cache2.css({
  "color": "#ff0000",
  "text-decoration": "underline",
  "background-color": "#eeeeee"
});
ready
No cache - single CSS
parent.find('p.mytext').css({
  "color": "#ff0000",
  "text-decoration": "underline",
  "background-color": "#eeeeee"
});
ready
Compare width Test 1
var el = parent.find('p.mytext')
el.css('color', '#ff0000');
el.css('text-decoration', 'underline');
el.css('background-color', '#eeeeee');
ready
Cache && CSS Class V3
cache3.addClass('stylize_p');
ready
Cache && CSS Class V4
cache4.addClass('stylize_p');
ready

Revisions

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