fragment vs. appendChild vs. innerHTML (v7)

Revision 7 of this benchmark created by Grant Kiely on

Description

Test which method is fastest to append multiple elements to DOM

Preparation HTML

<div id="test">
</div>

Setup

var test = document.getElementById('test'),i;

Teardown


    document.getElementById('test').innerHTML='';

Test runner

Ready to run.

Testing in
TestOps/sec
dom
var divNode = document.createElement('div');
i=100;
while(i--){
divNode.appendChild(document.createTextNode('hi there'));
}
test.appendChild(divNode);
ready
innerHTML
var str='';
i=100;
while(i--){
str += 'hi there';
}
test.innerHTML = str;
ready

Revisions

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