Browser dom speed tests (v5)

Revision 5 of this benchmark created on

Description

Tests to see what speeds the browser DOM runs at in various browsers.

DOM Core Performance: Appending, Prepending, InnerHTML, Buffered InnerHTML

Preparation HTML

<div id="-test-div" style="background-color: grey; position: absolute; z-index: 1;"></div>

<script>
var div = document.getElementById('-test-div');

function testAppend(div) {
        var add = null;
        for (var i = 0; i <= 1000; i++) {
                add = document.createElement('div');
                add.className = 'browser_dom_test';
                add.innerHTML = '<p>Some inner content.</p>';
                div.appendChild(add);
        }
}
function testPrepend(div) {
        var add = null;
        for (var i = 0; i <= 1000; i++) {
                add = document.createElement('div');
                add.className = 'browser_dom_test';
                add.innerHTML = '<p>Some inner content.</p>';
                div.insertBefore(add, div.firstChild);
        }
}
function testInnerHTML(div) {
        var add = null;
        for (var i = 0; i <= 1000; i++) {
                add = ['<div class="browser_dom_test">'];
                add.push('<p>Some inner content.</p>');
                add.push('</div>');
                div.innerHTML = add.join('');
        }
}
function testBufferInnerHTML(div) {
        var add=[];
        for (var i = 0; i <= 1000; i++) {
                add.push('<div class="browser_dom_test">');
                add.push('<p>Some inner content.</p>');
                add.push('</div>');
        }
        div.innerHTML = add.join('');
}
</script>

Teardown


    // Remove all insertions.
    div.innerHTML = "";

Test runner

Ready to run.

Testing in
TestOps/sec
Append
testAppend(div);
ready
Prepend
testPrepend(div);
ready
innerHTML
testInnerHTML(div);
ready
innerHTML + buffer
testBufferInnerHTML(div);
ready

Revisions

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