put-selector vs jquery vs dojo (v11)

Revision 11 of this benchmark created by Matthew Maxwell on

Description

In our test, we will create a div with a class of foo, and an id of "child" plus an iterator, i. We will append this new div to a div in our document.body with an id of target, and give it an innerHTML of "child" plus i.

Preparation HTML

<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" data-dojo-config="async: true"></script>

<script>
require(["dojo/dom-construct"]); // require for later use
</script>

Setup

var target = document.getElementById("target"); // as same code for target for consistency
    var domConstruct = require("dojo/dom-construct");
    var $target = jQuery(target); // cache jQuery target
    var i = 0;

Teardown


    domConstruct.empty(target);

Test runner

Ready to run.

Testing in
TestOps/sec
put-selector put
put(target, "div.foo#child" + i, "Child " + i);
i++;
ready
dom-construct place
domConstruct.place("<div class='foo' id='child" + i + "'>Child " + i + "</div>", target);
i++;
ready
dom-construct create
domConstruct.create("div", { className: "foo", innerHTML: "Child " + i }, target);
i++;
ready
jQuery append
$target.append("<div class='foo' id='child" + i + "'>Child " + i + "</div>");
i++;
ready
jQuery appendTo
jQuery("<div class='foo' id='child" + i +"'>Child " + i + "</div>").appendTo(target);
i++;
ready
jQuery appendTo (create)
jQuery("<div>", { className: "foo", innerHTML: "Child " + i }).appendTo(target);
i++;
ready

Revisions

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