Angular

JavaScript performance comparison

Revision 13 of this test case created by Matt Webb

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.9.1.min.js"></script>

<!-- ANGULAR -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.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>       




<script>
var ANG50ID=[];
for (var i=0; i<50;i++){
ANG50ID.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');
};<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

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

Preparation code output

  • {{item}}
  • {{item}}
var ANG1000ID=[]; for (var i=0; i<1000;i++){ ANG1000ID.push('ITEM'); };

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…
Angular 0-100 Items
SetANG(ANG100ID);
pending…
Angular 0-1000 Items
SetANG(ANG1000ID);
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