Test case details

Preparation Code

<!-- Mercury --> <script src="https://rawgit.com/Raynos/mercury/master/dist/mercury.js"></script> <!-- Jquery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://cdn.jsdelivr.net/knockout/3.2.0/knockout.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.6.1/ember.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.11.2/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.1.21/mithril.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.10.5/vue.min.js"></script> <script src="https://cdn.ractivejs.org/0.5.8/ractive.min.js"></script> <!-- Angular --> <div ng-app>   Angular:   <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> <div id="koappRL">   Knockout:   <span data-bind="foreach: data"><span data-bind="text: $data"></span></span> </div> <!-- Ember --> <div id="emapp">   <script type="text/x-handlebars">     Ember:     <span>       {{#each EMapp.data}}<span>{{this}}</span>{{/each}}     </span>   </script> </div> <!-- 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> <!-- Mercuryjs --> <div id="mercuryjs">         Mercuryjs: <span id="mercuryjsMountNode"></span> </div> <!-- Reactive --> <div id="reactive">   Reactive: <span id="reactiveMountNode"></span> </div> <script>   var Ctrl = function($scope){ $scope.data = []; };   var KOData = ko.observableArray();   var KOviewmodel = {data: KOData};   var ENV = {EXTEND_PROTOTYPES: false};   var ReactData = [];   var ReactUpdate = null;   var ReactComponent = React.createClass({displayName: 'PerfTest',     getInitialState: function() {       return { data: ReactData };     },     componentDidMount: function() {       ReactUpdate = this._onData;     },     render: function() {       return (         React.DOM.span(null,           this.state.data.map(function(result) {             return React.DOM.span(null, result);           })           )         );     },     _onData: function() {       this.setState({ data: ReactData });     }   });   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); })]);     }   }   var h = mercury.h   var mdata = mercury.array([])   function mrender(data) {     return h("span", data.map(function(datum) { return h('span', datum)}));   }   mercury.app(document.getElementById('mercuryjsMountNode'), mdata, mrender)   window.mercuryClear=function(){     mdata.splice(0,mdata.getLength())   }   window.mercuryPush=function(data){     mdata.push(data)   }     var ReactiveData = [];   window.ReactiveClear = function() {     ReactiveData.splice(0);   };   window.ReactivePush = function(data) {     ReactiveData.push(data);   };   $(document).ready(function() {     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);         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 KODataRL = ko.observableArray();     KODataRL.extend({ rateLimit: 0 });     var KOviewmodelRL = {data: KODataRL};     ko.applyBindings(KOviewmodelRL, document.getElementById('koappRL'));     window.KOclearRL = function (){       KODataRL.splice(0, KOData().length);     };     window.KOpushRL = function (data){       KODataRL.push(data);     };     EMapp = Ember.Application.create({       rootElement: '#emapp'     });     EMapp.data = Ember.A();     window.EMclear = function () {       EMapp.data.clear();     };     window.EMpush = function (data) {       EMapp.data.pushObject(data);     };     var reactComp = ReactComponent();     React.renderComponent(reactComp, document.getElementById('reactMountNode'));     window.RClear = function() {       ReactData.splice(0, ReactData.length);       ReactUpdate();     };     window.RPush = function(data) {       ReactData.push(data);       ReactUpdate();     }     m.module(document.getElementById("mithrilMountNode"), mithapp);     window.Mclear = function() {       m.startComputation();       MithrilData.splice(0);       m.endComputation();     };     window.Mpush = function(data) {       m.startComputation();       MithrilData.push(data);       m.endComputation();     }     var vueInstance = new Vue({      el: '#vuejsMountNode',      data: {       data: []     }   });     window.VueClear = function(){      vueInstance.data = []    };    window.VuePush = function(data){     vueInstance.data.push(data);   };   var ReactiveComponent = new Ractive({     el: 'reactiveMountNode',     template: '{{#data}}{{.}}{{/data}}',     data: { data: ReactiveData }   }); }); </script>

Test cases

Test #1

ANGclear(); for (var i = 0; i < 100; i++)   ANGpush("nitem");

Test #2

KOclear(); for (var i = 0; i < 100; i++)   KOpush("kitem");

Test #3

RClear(); for (var i = 0; i < 100; i++)   RPush("ritem");

Test #4

Mclear(); for (var i = 0; i < 100; i++)   Mpush("mitem");

Test #5

VueClear(); for (var i = 0; i < 100; i++)   VuePush("vitem");

Test #6

EMclear(); for (var i = 0; i < 100; i++)   EMpush("eitem");

Test #7

mercuryClear(); for (var i = 0; i < 100; i++)   mercuryPush("mitem");

Test #8

ReactiveClear(); for (var i = 0; i < 100; i++)         ReactivePush("iitem");