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

JavaScript performance comparison

Revision 62 of this test case created

Info

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 code

<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>
<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 (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. Here’s a list of current revisions for this page:

0 comments

Add a comment