js dom manipulation short

in-memory dom use

by seo gyeongseok

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<body>
    <div id='root'>
        <div>
            <div>5 dom change test</div>
            <button id='test'>test start</button>
            <button id='simpleFor'>simpleFor start</button>
            <div id='domPane'>
                <div id="dom1">1</div>
                <div id="dom2">2</div>
                <div id="dom3">3</div>
                <div id="dom4">4</div>
                <div id="dom5">5</div>
            </div>
        </div>
    </div>
</body>

JavaScript

"use strict"

function updateDom(cnt) {
    var i = 1, length = 5,
    	  domPane = document.getElementById("domPane"),
        newChild = '';
    
    for (; i <= length; i++) {
    		newChild += '<div id="dom' + i + '">' + (cnt + i) + "</div>";
    }
    
    domPane.innerHTML = newChild;
}

function test() {
    var i = 0, t1, t2,
        lenght = 100000;

    t1 = performance.now();
    for (; i < lenght; i++) {
        updateDom(i);
    }
    t2 = performance.now();

    console.log('test start:' + (t2 - t1) + 'ms');
}

function simpleFor() {
    var i = 0, cnt = 0, t1, t2,
        lenght = 100000;

    t1 = performance.now();
    for (; i < lenght; i++) {
        cnt++;
    }
    t2 = performance.now();

    console.log('simpleFor(' + cnt + ') :' + (t2 - t1) + 'ms');
}

document.getElementById("test").addEventListener("click", test);
document.getElementById("simpleFor").addEventListener("click", simpleFor);