I have been conducting performance tests on AngularJS to determine its compatibility with our application. To assess and compare DOM creation speed, I developed a JSFiddle example where users can experiment with different numbers of items to create.
The goal is to showcase n random users sorted by their project, with content tailored to each project type and excluding secret users from display.
Here's the HTML:
<div ng-repeat="user in users | orderBy:'project'" post-repeat-directive
ng-if="user.secretagent == false"
class="user"
ng-class="{male: (user.gender == 'm'), female: (user.gender != 'm')}"
ng-switch="user.project">
<h2>{{user.name}}</h2>
Project: {{user.project}}
<em ng-switch-when="fame">[fame]</em>
<em ng-switch-when="idol">[idol]</em>
</div>
Javascript:
angular.module('AngularBench', [])
.config(['$compileProvider', function ($compileProvider) {
$compileProvider.debugInfoEnabled(false);
}])
.controller("benchmarkController", ['$scope', 'TimeTracker', function($scope, TimeTracker) {
$scope.result = undefined;
$scope.users = [];
$scope.benchmark = function(size) {
TimeTracker.clockStartDate(size);
var users = getUsers(size);
$scope.users = users;
$scope.$watch(
function () { return TimeTracker.getDuration(); },
function(newVal, oldVal) { $scope.result = newVal; },
true
);
};
}])
.factory('TimeTracker', function() {
var start, end, duration;
return {
clockStartDate: function() {
start = Date.now();
},
clockEndDate: function() {
end = Date.now();
duration = (end - start) / 1000;
},
getDuration: function() {
return duration;
}
};
})
.directive('postRepeatDirective', ['$timeout', 'TimeTracker', function($timeout, TimeTracker) {
return function(scope, element, attrs) {
if (scope.$last){
$timeout(function(){
TimeTracker.clockEndDate();
});
}
};
}]);
function getUsers(size) {
var users = [];
for (var i=0; i<size; i++) {
var user = {
name: 'User ' + i,
gender: Math.random() > 0.5 ? 'm' : 'w',
project: Math.random() > 0.25 ? 'fame' : 'idol',
secretagent: Math.random() > 0.95
};
users.push(user);
}
return users;
}
Despite this, I've observed a significant decline in performance as the number of items grows. Once it reaches around 2500 items, the performance becomes noticeably sluggish.
While I understand the usual recommendation of using pagination or auto-scrolling, my focus isn't on finding an alternative solution to handling large lists in ngRepeat. Do you have any ideas on how to enhance the performance?