Stooders innerHTML vs appendChild

JavaScript performance comparison

Test case created

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    var template = document.createElement("template");
    for(var i = 0; i < 10; i++)
    {
       var elm = document.createElement("div");
       elm.innerHTML = "Div " + i;
       template.appendChild(elm);
    }
   
    var containerElement = document.createElement("div");
    var containerFragment = document.createDocumentFragment();
};

Benchmark.prototype.teardown = function() {
    if(containerElement.parentNode)
       containerElement.parentNode.removeChild(containerElement);
   
    if(containerFragment.parentNode)
       containerFragment.parentNode.removeChild(containerFragment);
};
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
innerHTML
containerElement.innerHTML = template.innerHTML;
document.body.appendChild(containerElement);
pending…
appendChild
var childNodes = Array.prototype.slice.call( template.cloneNode(true).content.childNodes )

for(index in childNodes)
{
   var childNode = childNodes[index];
   containerFragment.appendChild( childNode );
}

document.body.appendChild(containerFragment);
pending…

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

Compare results of other browsers

0 comments

Add a comment