innerHTML vs removeChild (v5)

Revision 5 of this 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 = 100;
    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 first = null;
        while( first = parent.firstChild ){
            parent.removeChild( first )
        }
    }

Test runner

Ready to run.

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

Revisions

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