jQuery.data() vs getAttribute() (v10)

Revision 10 of this benchmark created by djjeck on

Description

Test the data attribute

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="test">
  foo
</div>
<script>
  jQuery.fn.foo = function(prop, val) {
    return (val) ? this[0].setAttribute(prop, val) : this[0].getAttribute(prop);
  }


  $el = jQuery(document.getElementById("test"));
  el = document.getElementById("test");
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery.data()
$el.data("searchable", true);
$el.data("searchable");
ready
setAttribute()
el.setAttribute("searchable", true);
el.getAttribute("searchable");
ready
$.data
$.data($el, "searchable", true);
$.data($el, "searchable");
ready
attr with -data
$el.attr("data-searchable", true);
$el.attr("data-searchable");
ready
attr
$el.attr("searchable", true);
$el.attr("searchable");
ready
setAttribute on jQuery
$el[0].setAttribute("searchable", true);
$el[0].getAttribute("searchable");
ready
plugin
$el.foo("searchable", true);
$el.foo("searchable");
ready
jQuery DOM data- settAttr
$el[0].setAttribute("data-searchable", true);
$el[0].getAttribute("data-searchable");
ready
Direct, syntax 1
el[0]["searchable"] = true;
el[0]["searchable"];
ready
Direct, syntax 2
el[0].searchable = true;
el[0].searchable;
ready

Revisions

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