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.
Prerequisites
You need to understand following concepts:
Tips
Keep an eye on these things:
- Watch Cascade ($watch propagation through scopes) is the thing #1.
- Watch expressions complexity.
- Number and complexity of binding in templates.
- Scope hierarchy depth.
Full Watch Cascade is triggered by:
$http
response$timeout
invocation$location
change- DOM events (beware
ng-mousemove
)
What can I do:
- Use batarang to measure $watch profiles
- Do not leave
console.log
in watches and while measuring performance. console.log is slow as hell - Use
scope.$digest
instead ofscope.$apply
if you know the boundaries of model changes (e.g. the change of the model should be reacted upon only in child scopes) - Make smallest possible watch expressions
- Use filters with caution - each expression creates a watcher
- Use
$timeout
with 3rd optional argument == false (it does not cause the full cascade) when appropriate. - Do not use
$http
for polling - each response triggers cascade - Limit scope depth
- Beware deep watching - do not use
$watch(value, fn, true)
- Use
ng-repeat
with "track by" expression.