innerHTML vs removeChild

Benchmark created by sofosogo on

Description

test the performance of innerHTML & removeChild when cleaning a node.

Preparation HTML

<div id="parent"></div>

Setup

var parent = document.getElementById("parent");
    var MAX = 100000;
    function fill(){
        var html = '';
        for(var i = 0; i < MAX; i++){
            html += '<div>' + i + '</div>'
        }
        parent.innerHTML = html;
    }
    
    function testInnerHTML(){
        fill();
        parent.innerHTML = '';
    }
    function testRemoveChild(){
        fill();
        var childNodes = parent.childNodes;
        var len = childNodes.length;
        for(var i = 0; i < len; i++){
            parent.removeChild( childNodes[i] );
        }
    }

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
testInnerHTML();
ready
removeChild
testRemoveChild();
ready

Revisions

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