Preparation Code Preparation HTML (this will be inserted in the <body>
of a valid HTML5 document in standards mode) (useful when testing DOM operations or including libraries)
<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 >
<div ng-app >
Angular:
<span ng-controller ="Ctrl" id ="angList" > <span ng-repeat ="item in data" > {{item}}</span > </span >
</div >
<div id ="koapp" >
Knockout:
<span data-bind ="foreach: data" > <span data-bind ="text: $data" > </span > </span >
</div >
<div id ="emapp" > </div >
<script type ="text/x-handlebars" >
Ember :
<span >
{{#each EMapp.data}}<span > {{this}}</span > {{/each}}
</span >
</script >
<div id ="react" >
React: <span id ="reactMountNode" > </span >
</div >
<div id ="mithrilapp" >
Mithril: <span id ="mithrilMountNode" > </span >
</div >
<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 >
Setup JS
Teardown JS
Test cases
Test #1 Title *
Async
Code * ANGclear ();
for (var i = 0 ; i < 10 ; i++)
ANGpush ("ngitem" );
Test #2 Title *
Async
Code * ANGclear ();
for (var i = 0 ; i < 100 ; i++)
ANGpush ("ngitem" );
Title *
Async
Code * KOclear ();
for (var i = 0 ; i < 100 ; i++)
KOpush ("koitem" );
Title *
Async
Code * KOclear ();
for (var i = 0 ; i < 100 ; i++)
KOpush ("koitem" );
Title *
Async
Code * EMclear ();
for (var i = 0 ; i < 10 ; i++)
EMpush ("emitem" );
Title *
Async
Code * EMclear ();
for (var i = 0 ; i < 100 ; i++)
EMpush ("emitem" );
Title *
Async
Code * RClear ();
for (var i = 0 ; i < 10 ; i++)
RPush ("ritem" );
Title *
Async
Code * RClear ();
for (var i = 0 ; i < 100 ; i++)
RPush ("ritem" );
Title *
Async
Code * Mclear ();
for (var i = 0 ; i < 10 ; i++)
Mpush ("mitem" );
Title *
Async
Code * Mclear ();
for (var i = 0 ; i < 100 ; i++)
Mpush ("mitem" );
Title *
Async
Code * VueClear ();
for (var i = 0 ; i < 10 ; i++)
VuePush ("vitem" );
Title *
Async
Code * VueClear ();
for (var i = 0 ; i < 100 ; i++)
VuePush ("vitem" );