replaceChild vs. remove/appendChild (v3)

Revision 3 of this benchmark created on

Preparation HTML

<div id="parent" style="display:none;"><p>Hello world</p></div>

Setup

var parent = document.getElementById('parent');
    
    var children = [];
    
    var i, p;
    for (var i = 0; i < 10; i++) {
        p = document.createElement('p');
        p.innerHTML = Math.random();
        children.push(p);
    }
    
    i = 0;
    function getChild() {
        return children[i = (i + 1) % 10];
    }

Test runner

Ready to run.

Testing in
TestOps/sec
replaceChild
parent.replaceChild(getChild(), parent.firstChild);
ready
removeChild + appendChild
parent.removeChild(parent.firstChild);
parent.appendChild(getChild());
ready

Revisions

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