Angular (v13)

Revision 13 of this benchmark created by Matt Webb on

Description

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 HTML

<!-- 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>

Setup

SetANG([]);
    SetANGUpdate(ANG100ID);

Test runner

Ready to run.

Testing in
TestOps/sec
Angular 0-50 Items
SetANG(ANG50ID);
 
ready
Angular 0-100 Items
SetANG(ANG100ID);
ready
Angular 0-1000 Items
SetANG(ANG1000ID);
ready
Angular Update 100 of 100 Items (new data)
SetANGUpdate(ANG100ID2);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.