Test case details

Preparation Code

<!-- Jquery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.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.5.1/ember.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.10.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.1.30/mithril.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.5/vue.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> <!-- 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" v-text="item"></span></span> </div> <script> var Ctrl = function($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.DOM.span(null,         this.state.data.map(function(result) {           return React.DOM.span( {key:result.id}, result.text);         })       )     );       } }); 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() {   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);   };   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, $('#reactMountNode')[0]);   window.RClear = function() {     reactComp.setState({data: []})   };   window.RPush = function(data) {     var stateData = reactComp.state.data;     stateData.push(data);     reactComp.setState({data: stateData});   }   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.$set('data', []);   };   window.VuePush = function(data){         vueInstance.data.push(data);   };     }); </script>

Test cases

Test #1

ANGclear(); for (var i = 0; i < 10; i++)   ANGpush("ngitem");

Test #2

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

Test #3

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

Test #4

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

Test #5

EMclear(); for (var i = 0; i < 10; i++)   EMpush("emitem");

Test #6

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

Test #7

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

Test #8

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

Test #9

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

Test #10

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

Test #11

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

Test #12

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