put-selector vs jquery vs dojo (v18)

Revision 18 of this benchmark created by Matthew Maxwell on

Description

In our test, we will create a div with a class of foo and an innerHTML of "Child Node".

Preparation HTML

<style>
  #target { display: none; }
</style>
<div id="target">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script src="//kzyp.dojotoolkit.org/packages/put-selector/put.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js">
</script>

Setup

var target = document.getElementById("target");
    var $target = $(target);
    var div;

Teardown


    target.innerHTML = "";

Test runner

Ready to run.

Testing in
TestOps/sec
put-selector put
put(target, "div.foo[data-some-prop=bar]", "Child Node");
ready
dojo place
dojo.place("<div class='foo' data-some-prop='bar'>Child Node</div>", target);
ready
dojo create
dojo.create("div", {
  className: "foo",
  innerHTML: "Child Node",
  "data-some-prop": "bar"
}, target);
ready
jQuery append
$target.append("<div class='foo' data-some-prop='bar'>Child Node</div>");
ready
jQuery appendTo
jQuery("<div class='foo' data-some-prop='bar'>Child Node</div>").appendTo(target);
ready
jQuery appendTo (create)
jQuery("<div>", {
  className: "foo",
  innerHTML: "Child Node",
  "data-some-prop": "bar"
}).appendTo(target);
ready
raw DOM
div = document.createElement("div");
div.setAttribute("class", "foo");
div.setAttribute("data-some-prop", "bar");
target.appendChild(div);
ready

Revisions

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