dom vs array manipulation

Benchmark created by OpenGG on

Preparation HTML

<div id="dom_onscreen"></div>
<script>
    function addNodes(el, count){
        for(var i=0;i<count;++i){
            el.appendChild(document.createElement('span'));
        }
    }
    function addNodesFragment(el, count){
        var fragment = document.createDocumentFragment();
        for(var i=0;i<count;++i){
            fragment.appendChild(document.createElement('span'));
        }
        el.appendChild(fragment);
    }
    function clearNodes(el){
        el.innerHTML = '';
    }
    function addItems(arr, count){
        for(var i=0;i<count;++i){
            arr.push({});
        }
    }
    function clearItems(arr){
        arr.length = 0;
    }
    var $dom_onscreen = document.getElementById('dom_onscreen');
    var $dom_offscreen = document.createElement('div');
    arr = [];
    count = 100;
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
dom manipulation ( onscreen )
addNodes($dom_onscreen, count);
clearNodes($dom_onscreen);
ready
dom manipulation ( onscreen using document fragment )
addNodesFragment($dom_onscreen, count);
clearNodes($dom_onscreen);
ready
dom manipulation ( offscreen )
addNodes($dom_offscreen, count);
clearNodes($dom_offscreen);
ready
dom manipulation ( offscreen using document fragment )
addNodesFragment($dom_offscreen, count);
clearNodes($dom_offscreen);
ready
array manipulation
addItems(arr, count);
clearItems(arr);
ready

Revisions

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