jQuery().fn.attr vs jQuery().fn.prop vs jQuery().fn.data vs jQuery().data

JavaScript performance comparison

Revision 12 of this test case created by SMR

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="el"></div>
<script>
  // 'el-lo
  var $el = $('#el');
  var el  = $el[0];
  var get; // access holder, so that dead stores aren't so easily culled off.
  
  // Store only 19 strings to test.
  // In real code, there usually are not very many
  // unique keys that get accessed and mutated. 
  // It needs to be odd so that after counter%limit loops,
  // the attr/prop/data accessors return values.
  // This also shakes up the key/value pairs.
  var counter, limit = 19;
  var rnd = [];
  
  // Pre-create all strings unique, just to make sure nothing funny happens.
  for (var i = 0; i < limit; i++) {
      rnd[i] = 'X-' + i + '-' + Math.floor(Math.random() * 1001);
  }
  
  function nextKey() { return rnd[counter++ % limit]; }
  function nextVal() { return rnd[counter++ % limit]; }
  
</script>
<script>
  Benchmark.prototype.setup = function() {
    counter = 0;
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jQuery.fn.attr
 
$el.attr(nextKey(), nextVal());
get = $el.attr(nextKey());
 pending…
jQuery.fn.prop
 
$el.prop(nextKey(), nextVal());
get = $el.prop(nextKey());
 pending…
jQuery.fn.data
 
$el.data(nextKey(), nextVal());
get = $el.data(nextKey());
 pending…
jQuery.data(el)
 
$.data(el, nextKey(), nextVal());
get = $.data(el, nextKey());
 pending…
jQuery.data($el)
 
$.data($el, nextKey(), nextVal());
get = $.data($el, nextKey());
 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