react-vs-pure-js-200 (v17)

Revision 17 of this benchmark created by Alan on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.min.js"></script>
<div id="foo"></div>

Setup

var total = 200;
    var data = [];
    var foo = document.getElementById("foo");
    
    for (var i = 0; i < total; i++) {
      data.push({
        key: i,
        label: 'label' + i
      });
    }
    
    var Item = React.createClass({
      render: function() {
        return React.DOM.li({
            class: 'fooBar'
          },
          React.DOM.span(
            null, [React.DOM.span(null, 'bla'), this.props.label]
          )
        );
      }
    });
    
    var List = React.createClass({
      render: function() {
        var li = function(item) {
          return Item({
            label: item.label
          });
        };
        return React.DOM.ul(null, this.props.items.map(li));
      }
    });

Test runner

Ready to run.

Testing in
TestOps/sec
React
React.renderComponent(List({
  items: data
}), foo);
ready
Pure JS
foo.innerHTML = '<ul>' + data.map(function(item) {
  return '<li class="fooBar"><span><span>bla</span>' + item.label + '</span></li>';
}).join('') + '</ul>';
ready
jQuery non-optimized
data.forEach(function(item) {
  var $innerSpan = $('<span/>').text('bla');
  var $outerSpan = $('<span/>').text(item.label).prepend($innerSpan);
  var $li = $('<li/>').addClass('fooBar').append($outerSpan);

  $(foo).append($li);
});
ready
jQuery document fragment
var $ul = $('<ul/>');
data.forEach(function(item) {
  var $innerSpan = $('<span/>').text('bla');
  var $outerSpan = $('<span/>').text(item.label).prepend($innerSpan);
  var $li = $('<li/>').addClass('fooBar').append($outerSpan);

  $ul.append($li);
});

$ul.appendTo($(foo));
ready

Revisions

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