js vs react dom test(JS)

pure javascript vs react(virtualdom) dom manupulation test

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="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>
</body>

JavaScript

"use strict"

function updateDom(cnt) {
    document.getElementById("dom1").innerHTML = cnt + 1;
    document.getElementById("dom2").innerHTML = cnt + 2;
    document.getElementById("dom3").innerHTML = cnt + 3;
    document.getElementById("dom4").innerHTML = cnt + 4;
    document.getElementById("dom5").innerHTML = cnt + 5;
}

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);