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

Revision 26 of this benchmark created by Kenneth Kalmer on

Description

Testing different ways of setting/reading data-* attributes using jQuery, especially after noticing that Twitter's Bootstrap uses $.fn.attr('data-X') instead of $.fn.data('X')...

Using the Browserscope table (click on the Browserscope logo above the charts) would probably allow for more useful filtering of the data, and thus ease comparing the speed of the different write+read tests versus the different read-only tests.

Thanks for helping!

Preparation HTML

<script src="//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>

Setup

counter = 0;

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery.fn.attr (R+W)
$rw.attr('data-' + nextKey(), nextVal());
get = $rw.attr('data-' + nextKey());
ready
jQuery.fn.prop (R+W)
$rw.prop('data-' + nextKey(), nextVal());
get = $rw.prop('data-' + nextKey());
ready
jQuery.fn.data (R+W)
$rw.data(nextKey(), nextVal());
get = $rw.data(nextKey());
ready
jQuery.data(rw) (R+W)
$.data(rw, nextKey(), nextVal());
get = $.data(rw, nextKey());
ready
jQuery.data($rw) (R+W)
$.data($rw, nextKey(), nextVal());
get = $.data($rw, nextKey());
ready
jQuery.fn.attr (RO)
get = $ro.attr('data-string');
ready
jQuery.fn.prop (RO)
get = $ro.prop('data-string');
ready
jQuery.fn.data() (RO)
get = $ro.data('string');
ready
jQuery.data(ro) (RO)
get = $.data(ro, 'string');
ready
jQuery.data($ro) (RO)
get = $.data($ro, 'string');
ready

Revisions

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