React-style DOM updates (v2)

Revision 2 of this benchmark created on

Description

Testing out the theories behind React.js. Will batch updates on a DOM tree be faster than replacing the entire DOM tree à la .innerHTML or similar?

Preparation HTML

<div id="test-dom-root">
        <h1>
                Testing the Theories of <a class="react" href="http://facebook.github.io/react/">React</a>
        </h1>
        <p>
                How will the wholesale swap of the DOM tree fair against the powerful <a class="vd" href="http://google.com/search?q=react+virtual+dom">virtual DOM</a>.
        </p>
</div>

Setup

var tree = document.querySelector('#test-dom-root'),
        anchors = tree.querySelectorAll('a'),
        randomId = Math.round(Math.random() * 1000);

Test runner

Ready to run.

Testing in
TestOps/sec
.innerHTML
tree.innerHTML = '<h1>Testing the Theories of <a data-random-id="' + randomId + '" href="http://facebook.github.io/react/">react article</a></h1><p>How will the wholesale swap of the DOM tree fair against the powerful <a data-random-id="' + randomId + '" href="http://google.com/search?q=react+virtual+dom">virtual dom google earch</a>.</p>';
ready
Batch updates
anchors[0].setAttribute('data-random-id', randomId);
anchors[0].textContent = 'react article';
anchors[1].setAttribute('data-random-id', randomId);
anchors[1].textContent = 'virtual dom google earch';
ready

Revisions

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