polymer vs react update

JavaScript performance comparison

Revision 17 of this test case created by

Preparation code

 <script>
if( !('registerElement' in document &&
      'import'          in document.createElement('link') &&
      'content'         in document.createElement('template'))){
        document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.0/webcomponents-lite.js"><\/script>');
}
  </script>
  <link href="//cdn.rawgit.com/Polymer/polymer/v1.0.2/polymer.html" rel="import">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
  
  
  <dom-module id='my-polymer-el'>
    <template>Polymer <span>[[text]]</span></template>
  </dom-module>
  <script>
    Polymer({
      is:'my-polymer-el',
      properties:{
        text:{type:String}
      }
    });
  </script>

  <my-polymer-el id='myPolymerEl'></my-polymer-el>

  <div id='reactContainer'></div>

<script>
//Create the items
var items = [];
for(var i=0; i<1000; i++){
  items.push(i);
}

//Set polymer text to init
myPolymerEl.text = 'init';

//Create react element
var MyReactElContainer = React.createClass({
  render:function(){

    var text = 'init';
    for(var i = 0; i < items.length; i++){
      text = 'test' + this.props.items[i];
    }

    return (
      React.createElement('MyReactEl', {text: 'ReactJS '+ this.props.text}, null);
    )
  }
});

var MyReactEl = React.createClass({
  render:function(){
    return React.createElement('span', null, 'ReactJS '+ this.props.text);
  }
});

//Render initial component
React.render(
  React.createElement(MyReactEl, {text:'init'}),
  reactContainer
);

//Render polymere
for(var i=0; i<items.length; i++){
  myPolymerEl.text = 'test'+items[i];
}

//Render react
React.render(React.createElement(MyReactEl, {items:items}), reactContainer);


//sort the items
items.sort(function() {
  return .5 - Math.random();
});
</script>
    

Preparation code output

<link href="//cdn.rawgit.com/Polymer/polymer/v1.0.2/polymer.html" rel="import"> <dom-module id='my-polymer-el'> <template>Polymer <span>[[text]]</span></template> </dom-module> <my-polymer-el id='myPolymerEl'></my-polymer-el> <div id='reactContainer'></div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Polymer
for(var i=0; i<items.length; i++){
  myPolymerEl.text = 'test'+i;
}
pending…
React
for(var i=0; i<items.length; i++){
  React.render(
    React.createElement(MyReactEl, {key:items[i],text:'test'+i}),
    reactContainer
  );
}
pending…

Compare results of other browsers

Revisions

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

0 Comments