AngularJS: Performance tips

If you are developing large angular application you'll have to tune the performance of your app eventually.
To make the performance tuning process smooth and efficient, you need to have a deep understanding of angular.

But I will make the process easier by giving you some hints on angular-specific performance tuning.


You need to understand following concepts:


Keep an eye on these things:

  1. Watch Cascade ($watch propagation through scopes) is the thing #1.
  2. Watch expressions complexity.
  3. Number and complexity of binding in templates.
  4. Scope hierarchy depth.

Full Watch Cascade is triggered by:

  1. $http response
  2. $timeout invocation
  3. $location change
  4. DOM events (beware ng-mousemove)

What can I do:

  1. Use batarang to measure $watch profiles
  2. Do not leave console.log in watches and while measuring performance. console.log is slow as hell
  3. Use scope.$digest instead of scope.$apply if you know the boundaries of model changes (e.g. the change of the model should be reacted upon only in child scopes)
  4. Make smallest possible watch expressions
  5. Use filters with caution - each expression creates a watcher
  6. Use $timeout with 3rd optional argument == false (it does not cause the full cascade) when appropriate.
  7. Do not use $http for polling - each response triggers cascade
  8. Limit scope depth
  9. Beware deep watching - do not use$watch(value, fn, true)
  10. Use ng-repeat with "track by" expression.