polymer vs react update

JavaScript performance comparison

Revision 6 of this test case created by Peter

Preparation code

  <script>
if( true || !('registerElement' in document &&
      'import'          in document.createElement('link') &&
      'content'         in document.createElement('template'))){
        document.write('<script src="https://rawgit.com/webcomponents/webcomponentsjs/0.6.0/webcomponents-lite.js"><\/script>');
}
  </script>
  <link href="//rawgit.com/polymer/polymer/0.8-preview/polymer.html" rel="import">
  <script src="https://fb.me/react-0.13.1.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
);
</script>
    

Preparation code output

<link href="//rawgit.com/polymer/polymer/0.8-preview/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
React
for(var i=0; i<100; i++){
  React.render(
    React.createElement(MyReactEl, {text:'test'+i}),
    reactContainer
  );
}
pending…
Polymer
for(var i=0; i<100; i++){
  myPolymerEl.text = 'test'+i;
}
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