Angular VS Knockout VS Ember VS React VS Mithril VS Mag.JS vs Polymer (v803)

Revision 803 of this benchmark created by gospon.mintz on

Description

This is a simple rendering speed test between the most popular libraries/frameworks.

Updates:

25.12.2015 - removed track by $index in AngularJS impl.

03.10.2015 - Optimized Mithris implementation.

10/1/2015 - updated mag.js version

27.05.2015 - Second update today: Changed Angular.js to only $apply ONCE per 100 writes: That's a more realistic comparison to the newer frameworks that do that implicitly. Angular is still disappointingly slow, but what can you do.

27.05.2015 - Fixed 622 on IE. Now Mag.js is super-fast on IE as well, though it performs rather pitifully on mobile. Also, note on React: It looks like the "proper" way to use React is to queue up a bunch of changes and then create them all at once. See this benchmark for an example: https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout

26.05.2015 - Added Mag.js back to 619 because it's SO fast, even when I force a render in every test, and because it's one of the few that doesn't rely on mixing code into your HTML; 620/621 both fail for me, and 619 was the last version that worked.

17.05.2015 - Updated angular, ember, react and mithril to their latest versions. e.g. ember now uses the new Glimmer engine. However react still is way too slow. I'm not a react expert, please look at react and fix the test if you are experienced with reactjs Also we might want to include ractive and Mercury again, the latest working version seems to be commit 603. However after that it stopped working, therefore it is not included anymore. Feel free to make it work again!

Preparation HTML

<!-- Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.0-beta.1/ember-template-compiler.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.0-beta.1/ember.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
<!--[if IE]><script src="https://rawgit.com/jakearchibald/es6-promise/master/dist/es6-promise.min.js"></script><![endif]-->
<script src="https://rawgit.com/magnumjs/mag.js/master/dist/mag.0.20.3.min.js"></script>
<script src="https://cdn.rawgit.com/MaxArt2501/object-observe/master/dist/object-observe.min.js"></script>

      <script src="http://polygit.org/polymer+v1.1.0/components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="http://polygit.org/polymer+v1.1.0/components/polymer/polymer.html">
<!-- Polymer -->
<template id="polynode" is="dom-repeat">
  <span>[[item]]</span>
</template>


<!-- Jquery -->
jQuery:
<div id="jq_test"></div>

<script>
var jqEl = $('#jq_test');
var children = [];
var jqPush = function (data) {
 children.push('<span>' + data + '</span>');
}
var jqClear = function () {
 children = []; 
 jqEl.empty();
}
var jqAdd = function() {
 jqEl.append(children.join(""));
}
</script>

<!-- Angular -->
<div ng-app="app">
  Angular:
<!--  <span ng-controller="Ctrl" id="angList"><span ng-repeat="item in data track by $index">{{item}}</span></span> -->

<span ng-controller="Ctrl" id="angList"><span ng-repeat="item in data">{{::item}}</span></span>
</div>

<!-- Knockout -->
<div id="koapp">
  Knockout:
  <span data-bind="foreach: data"><span data-bind="text: $data"></span></span>
</div>

<!-- Ember -->

<div id="emapp"></div>
<script type="text/x-handlebars">
  Ember:
  <span>
    {{#each EMapp.data}}<span>{{this}}</span>{{/each}}
  </span>
</script>


<!-- React -->
<div id="react">
  React: <span id="reactMountNode"></span>
</div>


<!-- Mithril -->
<div id="mithrilapp">
  Mithril: <span id="mithrilMountNode"></span>
</div>


<!-- Vuejs -->
<div id="vuejs">
        Vuejs: <span id="vuejsMountNode"><span v-repeat="item: data">{{ item }}</span></span>
</div>

  <!-- MagJS perf-->
  <div id="magjsapp">
    MagJS:
    <results></results>
    <div>
      <span id="magjsappMountNode"><span class="magjsdata"><span></span></span>
      </span>
    </div>
  </div>
  <!-- MagJS perf-->

<script>
window.getId = function(idx)
  {
    var d = Date.now() + "";
    return idx + "-" + d.substring(d.length - 6);
  };

angular.module('app', [])
.controller('Ctrl', ['$scope', Ctrl]);
function Ctrl($scope) {
    $scope.data = [];
};

var KOData = ko.observableArray();
var KOviewmodel = {data: KOData};

var ENV = {EXTEND_PROTOTYPES: false};

var ReactComponent = React.createClass({displayName: 'PerfTest',
  getInitialState: function() {
    return { data: [] };
  },
  render: function() {
    return (
       React.createElement("span", null,
        this.state.data.map(function(result) {
          return React.createElement("span", null, result);
        })
      )
    );
  }
});

var MithrilData = new Array();
var mithapp = {
  controller: function() {
    this.data = MithrilData;
  },
  view: function(ctrl) {
    return m("span", [ctrl.data.map(function(datum) { return m('span', datum); })]);
  }
}

$(document).ready(function() {



  EMapp = Ember.Application.create({
    rootElement: '#emapp'
  });
  EMapp.data = Ember.A();

  window.EMclear = function () {
    EMapp.data.clear();
  };
  window.EMpush = function (data) {
    EMapp.data.pushObject(data);
  };


  angular.element(document).ready(function() {
    var ang_scope = $('#angList').scope();

    window.ANGclear = function(){
      ang_scope.data = [];
      ang_scope.$apply();
    };
    window.ANGpush = function(data){
      ang_scope.data.push(data);
    };
    window.ANGapply = function() {
      ang_scope.$apply();
    };
  });

  ko.applyBindings(KOviewmodel, document.getElementById('koapp'));
  window.KOclear = function (){
    KOData.splice(0, KOData().length);
  };
  window.KOpush = function (data){
    KOData.push(data);
  };


  var reactComp = React.render( React.createElement(ReactComponent, null), document.getElementById('reactMountNode'));

  window.RClear = function() {
    reactComp.setState({data: []})
  };

  window.RChangeState = function(newStateData) {
    reactComp.setState({data: newStateData});
  }

  m.module(document.getElementById("mithrilMountNode"), mithapp);
  window.Mclear = function() {
    MithrilData.splice(0);
  };

  window.Mpush = function(data) {
    MithrilData.push(data);
  };
  window.MstartComputation = function() {
    m.startComputation();
  };
  window.MendComputation = function() {
    m.endComputation();
  };
  

  var vueInstance = new Vue({
          el: '#vuejsMountNode',
          data: {
                  data: []
          }
  });
  
  window.VueClear = function(){
          vueInstance.data = []
  };

  window.VuePush = function(data){
                vueInstance.data.push(data);
  };
   var MagJSData = ['first'];

 var magjsdataNode = {
   view: function(state, props) {
     state.magjsdata = props.MagJSData.map(function(data) {
       return {
         span: data
       }
     });
   }
 }
 var magjsapp = {
   view: function(state, props) {
     mag.module("magjsappMountNode", magjsdataNode, props);
   }
 }
 var comp = mag.create("magjsapp", magjsapp, {
   MagJSData: MagJSData
 });
 var instance = comp()

  window.MagJSclear = function() {
    MagJSData.splice(0);
  };

  window.MagJSpush = function(data) {
    MagJSData.push(data);
  };

  window.MagJSforceRedraw = function(data) {
    instance.draw()
  }
  MagJSclear();
});
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Mithril
MstartComputation();
Mclear();
for (var i = 0; i < 100; i++) {
  Mpush("mitem"+ getId(i));
}
MendComputation();
ready
MagJS
MagJSclear();
for (var i = 0; i < 100; i++) {
  MagJSpush("mjsit"+getId(i));
}
MagJSforceRedraw();
 
ready
React
var newStateData = [];
for (var i = 0; i < 100; i++)
  newStateData.push("ritem"+ getId(i));
RChangeState(newStateData);
 
ready
Angular
ANGclear();
for (var i = 0; i < 100; i++) {
  ANGpush("nitem"+ getId(i));
}
ANGapply();
ready
vuejs
VueClear();
for (var i = 0; i < 100; i++)
  VuePush("vitem"+ getId(i));
 
ready
Ember
EMclear();
for (var i = 0; i < 100; i++)
  EMpush("eitem"+ getId(i));
 
ready
jQuery
jqClear();
for (var i = 0; i < 100; i++) {
  jqPush('jq-item'+ getId(i));
}
jqAdd();
 
ready
Knockout
KOclear();
for (var i = 0; i < 100; i++)
  KOpush("kitem"+ getId(i));
 
ready
Polymer
var polynode=document.getElementById('polynode');
polynode.items=[];
for(var i = 0;i<100;i++)
  polynode.push('items','polymer-'+getId(i));
 
ready

Revisions

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