4

As a requirement, I have to analyze the performance benchmark of several AngularJS components such as ng-grid, data-tables in IE8, Chrome & FF against a mock data. I have the mock data in place.

Now when using IE8 Profiler, I am getting time (ms) for several functions. As per AngularJS call structure, should $digest time (Inclusive Time, as per IE8 profiler) reflect the load time of the page, or the sum of $digest & $apply? I am new to AngularJS, so an explanation on these concepts would be nice!

Koustuv Sinha
  • 1,640
  • 19
  • 34

1 Answers1

2

Note that calling $apply will trigger $digest on the $rootScope, which means $digesting all child scopes.

The $apply function itself is relatively light (you can inspect it in the angular source). It is the process of evaluating watchers and comparing values (dirty-checking) during a $digest that can get expensive. Because of this, performance testing to date has been focused on measuring the $digests. Some examples:

How does data binding work in AngularJS? (see Misko's answer)

How Do I Measure the Performance of my AngularJS app's digest Cycle?

http://blog.scalyr.com/2013/10/angularjs-1200ms-to-35ms/

This is a great explanation of the difference between an $apply and a $digest: http://www.sitepoint.com/understanding-angulars-apply-digest/. Relevant excerpts:

$digest:

The $digest cycle starts as a result of a call to $scope.$digest(). Assume that you change a scope model in a handler function through the ng-click directive. In that case AngularJS automatically triggers a $digest cycle by calling $digest(). When the $digest cycle starts, it fires each of the watchers. These watchers check if the current value of the scope model is different from last calculated value. If yes, then the corresponding listener function executes. As a result if you have any expressions in the view they will be updated. In addition to ng-click, there are several other built-in directives/services that let you change models (e.g. ng-model, $timeout, etc) and automatically trigger a $digest cycle.

$apply:

AngularJS ... will account for only those model changes which are done inside AngularJS’ context (i.e. the code that changes models is wrapped inside $apply()). Angular’s built-in directives already do this so that any model changes you make are reflected in the view. However, if you change any model outside of the Angular context, then you need to inform Angular of the changes by calling $apply() manually. It’s like telling Angular that you are changing some models and it should fire the watchers so that your changes propagate properly.

Community
  • 1
  • 1
user2943490
  • 6,900
  • 2
  • 22
  • 38
  • 1
    So for a page having ng-grid, measuring the `$digest` from IE8 Profiler will give the performance measure? – Koustuv Sinha Dec 11 '14 at 10:32
  • 1
    it will tell you performance of a $digest cycle, yes. Another thing to consider is how much DOM repainting is happening. The amount will differ from library to library depending on how much DOM manipulation they do. The scalyr article linked above goes into more detail about this. – user2943490 Dec 11 '14 at 11:12