Angular VS Knockout VS ExtJS

JavaScript performance comparison

Revision 12 of this test case created

Info

Designed to test binding to rendering performance of these frontend frameworks.

Backbone.js was removed due to implementation possibilities

Using more recent version of ExtJS with putative grid performance improvements.

Preparation code

<!-- JQURY -->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<!-- ANGULAR -->
<script src="http://code.angularjs.org/angular-1.0.1.min.js" ng:autobind></script>
<script>
 
var Ctrl=function($scope){
        $scope.data=[];
}
</script>
<div ng:app>
<ul ng-controller="Ctrl" id="angList"  >
<li ng-repeat="item in data">{{item}}</li>
</ul>

<script>
var SetANG= function(data){
$('#angList').scope().data=data;
$('#angList').scope().$apply(function(){});
};
</script>       


<!-- ANGULAR Update -->
 <script>
 
var CtrlUpdate=function($scope){
        $scope.data=[];
}
</script>

<ul ng-controller="CtrlUpdate" id="angListUpdate"  >
<li ng-repeat="item in data">{{item}}</li>
</ul></div>
</div>
<script>
var SetANGUpdate= function(data){
$('#angListUpdate').scope().data=data;
$('#angListUpdate').scope().$apply(function(){});
};
</script>       


<!-- EXT -->
<script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.1.1a-gpl/ext-all.js"></script>
<div id="extme"></div>
<script>
 
var EXTData= [ ];
var store = Ext.create('Ext.data.Store', {
    storeId:'employeeStore',
    fields:['name' ],
    data: EXTData
   
});
Ext.create('Ext.grid.Panel', {
    title: 'Employees',
    store: Ext.data.StoreManager.lookup('employeeStore'),
         columns: [
        {     dataIndex: 'name' }],
    renderTo: Ext.getBody()
});
 
var SetEXT=function (data){
store.removeAll();
store.add(data);
}
</script>


<!-- KO -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script>var KOData=null;</script>
KO:<BR><span id="KOTest" data-bind='text: KOData'> </span><BR> 
<script>
KOData=ko.observable([]);
ko.applyBindings();
var SetKO=function (data){
KOData=ko.observable(data);
ko.applyBindings();
}
</script>





<script>
var ANG50ID=[];
for (var i=0; i<50;i++){
ANG50ID.push('ITEM');
};
var EXT50ID=[];
for (var i=0; i<50;i++){
EXT50ID.push({name:'ITEM'});
};
var KO50ID=[];
for (var i=0; i<50;i++){
KO50ID.push('ITEM');
};


var ANG100ID=[];
for (var i=0; i<100;i++){
ANG100ID.push('ITEM');
};
var ANG100ID2=[];
for (var i=0; i<100;i++){
ANG100ID2.push('ITEM2');
};
var EXT100ID=[];
for (var i=0; i<100;i++){
EXT100ID.push({name:'ITEM'});
};
var KO100ID=[];
for (var i=0; i<100;i++){
KO100ID.push('ITEM');
};



var ANG1000ID=[];
for (var i=0; i<1000;i++){
ANG1000ID.push('ITEM');
};
var EXT1000ID=[];
for (var i=0; i<1000;i++){
EXT1000ID.push({name:'ITEM'});
};
var KO1000ID=[];
for (var i=0; i<1000;i++){
KO1000ID.push('ITEM');
};
</script>
<script>
Benchmark.prototype.setup = function() {
    SetANG([]);
    SetEXT([]);
    SetKO([]);
   
    SetANGUpdate(ANG100ID);
};
</script>

Preparation code output

  • {{item}}
  • {{item}}
KO:

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Angular 0-50 Items
SetANG(ANG50ID);
 
pending…
Knockout 0-50 Items
SetKO(KO50ID);
pending…
ExtJS 0-50 Items
SetEXT(EXT50ID);
pending…
Angular 0-100 Items
SetANG(ANG100ID);
pending…
Knockout 0-100 Items
SetKO(KO100ID);
pending…
ExtJS 0-100 Items
SetEXT(EXT100ID);
pending…
Angular 0-1000 Items
SetANG(ANG1000ID);
pending…
Knockout 0-1000 Items
SetKO(KO1000ID);
pending…
ExtJS 0-1000 Items
SetEXT(EXT1000ID);
pending…
Angular Update 100 of 100 Items (new data)
SetANGUpdate(ANG100ID2);
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. Here’s a list of current revisions for this page:

0 comments

Add a comment