js vs react dom test(React)

pure javascript vs react(virtualdom) dom manupulation test

by seo gyeongseok

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<body>
    <script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
    <div id='root'></div>
</body>

JavaScript 1.7

"use strict"

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            cnt: 0
        };

        this.test = this.test.bind(this);
    }

    updateDom(cnt) {
        this.setState({
            cnt: cnt
        });
    }

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

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

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

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

    render() {
        return (
            <div>
                <div>5 dom change test</div>
                <button onClick={this.test}>test start</button>
                <button onClick={this.simpleFor}>simpleFor start</button>
                <div id="dom1">{this.state.cnt + 1}</div>
                <div id="dom2">{this.state.cnt + 2}</div>
                <div id="dom3">{this.state.cnt + 3}</div>
                <div id="dom4">{this.state.cnt + 4}</div>
                <div id="dom5">{this.state.cnt + 5}</div>
            </div>
        );
    }
}

ReactDOM.render(
    <Test />,
    document.getElementById('root')
);