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

JavaScript performance comparison

Revision 62 of this test case created by

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="rw"></div><div id="ro" data-text="readonly"></div>
<script>
  // 'el-lo read-write element
  var $rw = $('#rw');
  var rw  = $rw[0];
  // 'el-lo read-only element
  var $ro = $('#ro');
  var ro  = $ro[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

<div id="rw"></div><div id="ro" data-text="readonly"></div> <script> // 'el-lo read-write element var $rw = $('#rw'); var rw = $rw[0]; // 'el-lo read-only element var $ro = $('#ro'); var ro = $ro[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>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
jQuery.fn.attr (R+W)
$rw.attr('data-' + nextKey(), nextVal());
get = $rw.attr('data-' + nextKey());
pending…
jQuery.fn.prop (R+W)
$rw.prop('data-' + nextKey(), nextVal());
get = $rw.prop('data-' + nextKey());
pending…
jQuery.fn.data (R+W)
$rw.data(nextKey(), nextVal());
get = $rw.data(nextKey());
pending…
jQuery.data(rw) (R+W)
$.data(rw, nextKey(), nextVal());
get = $.data(rw, nextKey());
pending…
jQuery.data($rw) (R+W)
$.data($rw, nextKey(), nextVal());
get = $.data($rw, nextKey());
pending…
jQuery.fn.attr (RO)
get = $ro.attr('data-string');
pending…
jQuery.fn.prop (RO)
get = $ro.prop('data-string');
pending…
jQuery.fn.data() (RO)
get = $ro.data('string');
pending…
jQuery.data(ro) (RO)
get = $.data(ro, 'string');
pending…
jQuery.data($ro) (RO)
get = $.data($ro, 'string');
pending…
jQuery.data($ro) (RO) (v2)
get = $.data($(ro), 'string');
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.

0 Comments