dhtml vs innerhtml (v2)

Revision 2 of this benchmark created on

Description

what's faster? creating lis with divs, or setting + appending to innerhtml?

Preparation HTML

<script src="https://advertiser.spotxchange.com/js/web_include/mootools?debug=false">
</script>
<ul id="list">
</ul>
<script>
  document.id("list").empty();
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
dhtml
document.id("list").adopt([new Element("li").adopt([
new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world"))])]);
ready
inner html
var oldHTML = document.id("list").get("html");
document.id("list").set("html", oldHTML + "<li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li>");
ready
dhtml * 6
document.id("list").adopt([new Element("li").adopt([
new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world"))]), new Element("li").adopt([
new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world"))]), new Element("li").adopt([
new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world"))]), new Element("li").adopt([
new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world"))]), new Element("li").adopt([
new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world"))]), new Element("li").adopt([
new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world")), new Element('div').adopt(new Element("span").appendText("Hello world"))])]);
ready
inner html * 6
var oldHTML = document.id("list").get("html");
document.id("list").set("html", oldHTML + "<li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li><li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li><li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li><li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li><li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li><li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li>");
ready
innerHTML property
document.id("list").innerHTML += "<li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li><li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li><li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li><li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li><li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li><li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li>";
ready
adopting Moo Elements
document.id("list").adopt(Elements.from("<li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li><li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li><li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li><li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li><li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li><li><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div><div><span>Hellow world</span></div></li>"));
ready

Revisions

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