reactjs vs server side html rendering

Benchmark created by Sławek Kaczorowski on

Preparation HTML

<table>
        <thead>
            <tr>
                <th>Foo</th>
                <th>Bar</th>
                <th>Foobar</th>
                <th>Barfoo</th>
            </tr>
        </thead>
        <tbody id="results">

        </tbody>
    </table>
<script src="http://fb.me/react-0.11.2.min.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.2.js"></script>

Setup

var request = function(uri, callback) {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET", "http://render.ospwebtest.opera.com/" + uri, true);
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          callback(xmlhttp.responseText);
        }
      }
      xmlhttp.send();
    };

Teardown


    document.getElementById("results").innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
ReactJS render
 var reactRender = function(products) {
   var products = JSON.parse(products);
   React.renderComponent(ProductTable({
     products: products
   }), document.getElementById("results"));
 };
 var ProductTable = React.createClass({
   displayName: 'ProductTable',
   render: function() {
     var rows = [];
     this.props.products.forEach(function(product) {
       rows.push(ProductRow({
         product: product
       }));
     });
     return (
       React.DOM.tbody(null, rows)
     );
   }
 });

 var ProductRow = React.createClass({
   displayName: 'ProductRow',
   render: function() {
     return (
       React.DOM.tr(null,
         React.DOM.td(null, this.props.product.foo,
           React.DOM.span(null, this.props.product.foo_percentage_diff)
         ),
         React.DOM.td(null, this.props.product.bar,
           React.DOM.span(null, this.props.product.bar_percentage_diff)
         ),
         React.DOM.td(null, this.props.product.foobar,
           React.DOM.span(null, this.props.product.foobar_percentage_diff)
         ),
         React.DOM.td(null, this.props.product.barfoo,
           React.DOM.span(null, this.props.product.barfoo_percentage_diff)
         )
       )
     );
   }
 });



 request('json/', reactRender);
ready
InnerHTML server side rendered
  request('html/', function(responseText) {
    document.getElementById("results").innerHTML = responseText;
  });
ready
vanillajs client render
     var vanillaRender = function(data) {
       var jsonData = JSON.parse(data),
         resultsDiv = document.getElementById("results").cloneNode(true);
       jsonData.forEach(function(item) {
         var row = document.createElement('tr');
         var createColumn = function(colContent, spanContent) {
           var col = document.createElement('td'),
             span = document.createElement('span');
           col.textContent = colContent;
           span.textContent = spanContent;
           col.appendChild(span);
           return col;
         };
         row.appendChild(createColumn(item.foo, item.foo_percentage_diff));
         row.appendChild(createColumn(item.bar, item.bar_percentage_diff));
         row.appendChild(createColumn(item.foobar, item.foobar_percentage_diff));
         row.appendChild(createColumn(item.barfoo, item.barfoo_percentage_diff));
         resultsDiv.appendChild(row);
       });
       document.getElementById("results").innerHTML = resultsDiv.innerHTML;
     };
     request('json/', vanillaRender);
ready

Revisions

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

  • Revision 1: published by Sławek Kaczorowski on