Angular VS Knockout VS ExtJS

JavaScript performance comparison

Revision 14 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.com/ext/beta/4.2.0.265/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