$().prop vs $().prop vs $().data vs $().val

JavaScript performance comparison

Revision 72 of this test case created by Heavensrevenge

Preparation code

<script src="//code.jquery.com/jquery-git2.js"></script>

<input id="el" value="stuff" data-value="stuff" />
 
<script>
Benchmark.prototype.setup = function() {
      var i = 0,
          el = document.getElementById('el'),
          $el = $(el);
};
</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
$.fn.val get
$el.val();
pending…
$.fn.prop get
$el.prop('value');
pending…
$.fn.attr get
$el.attr('value');
pending…
JS get property
el.value
pending…
JS getAttribute
el.getAttribute('value');
pending…
JQ[0] to Js getAttribute
$el[0].getAttribute('value');
pending…
JQ[0] to Js
$el[0].value;
pending…
$.prop get
$.prop($el[0], 'value');
pending…
$.fn.data get
$el.data('value')
pending…
$.data get
$.data($el[0], 'value')
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