polymer vs react update

JavaScript performance comparison

Revision 13 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://rawgit.com/webcomponents/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://fb.me/react-0.13.3.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>
myPolymerEl.text = 'init';

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

React.render(
  React.createElement(MyReactEl, {text:'init'}),
  reactContainer
);
var items = [];
for(var i=0; i<100; i++){
  items.push(i);
}

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

for(var i=0; i<items.length; i++){
  React.render(
    React.createElement(MyReactEl, {key:items[i],text:'test'+items[i]}),
    reactContainer
  );
}
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