ng-repeat vs ng-repeat with trace by id (v2)

Revision 2 of this benchmark created on

Description

Testing th post;

Preparation HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>

<div ng-app="jsperfApp">
  <div ng-controller="TasksCtrl">
    <ul class="tasks">
        <li ng-repeat="task in tasks" task="task" class="task">                   </li>
    </ul>
  </div>

  <div ng-controller="TasksCtrlIndex">
    <ul class="tasks">
      <li ng-repeat="task in tasks track by task.id" task="task" class="task"></li>
    </ul>
  </div>
</div>

<script>
var testApp = angular.module('jsperfApp', []);

window.testApp=testApp;
testApp.directive('task', function() {
    return {
        scope: {
            task: '='
        },
        template: '{{ task.title }} <span class="time">({{ prettyTaskDate }})</span>',
        link: function(scope) {
      
            scope.$watch('task.date', function() {
                scope.prettyTaskDate = scope.task.date;
            });
        }
    };
})
.controller('TasksCtrl', function($scope) {
    $scope.tasks = [];
    window.tasksRepeat = $scope;
})

.controller('TasksCtrlIndex', function($scope) {
    $scope.tasks = [];
    window.tasksRepeatIndex = $scope;
 });
;

window.clearScopes = function(){
  window.tasksRepeat.tasks = [];
  window.tasksRepeat.$digest();
  window.tasksRepeatIndex.tasks = [];
  window.tasksRepeatIndex.$digest();
};
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
ng-repeat
window.clearScopes();
var date = new Date().toISOString();
for (var i = 1; i < 2000; i++) {
  window.tasksRepeat.tasks.push({
    id: i,
    title: 'Task ' + i,
    date: date
  });
}
window.tasksRepeat.$digest();
ready
ng-repeat with track by index
window.clearScopes();
var date = new Date().toISOString();
for (var i = 1; i < 2000; i++) {
  window.tasksRepeatIndex.tasks.push({
    id: i,
    title: 'Task ' + i,
    date: date
  });
}
window.tasksRepeatIndex.$digest();
ready

Revisions

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