If you are planning to create a large application using Angularjs, you need to take care of some basic performance issues in angular which may slow down your application.
1. Minimize Watchers
Angularjs uses dirty checking to keep track of all the updates in an app.So if we use so many watchers in our app it will rerun the digest cycle if one watcher is dependent on other watcher.
The following codes creates so many watchers.
1. Avoid using {{expressions}} instead use ng-bind.
2. Instead of using ng-repeat='product in products' use ng-repeat = 'product in products trackby product.id', also you can add pagination or autoscroll if using ng-repeat.
3. Avoid using $scope.$watch instead use $watchcollection
4. Avoid {{ value | filter }}, instead use $filter inside controller.
5. Use ng-if instead of ng-show.
6. If lot of changes happen in ng-model , Debounce it like ng-model-options="{debounce: 250}"
7. Use bind once if possible like below:
{{name}} to {{::name}}
8. Avoid calling $scope.apply and $scope.digest manually, as angularjs automatically calls these process.
If we put :: before value data will work as a one way binding.
1. Minimize Watchers
Angularjs uses dirty checking to keep track of all the updates in an app.So if we use so many watchers in our app it will rerun the digest cycle if one watcher is dependent on other watcher.
The following codes creates so many watchers.
1. Avoid using {{expressions}} instead use ng-bind.
2. Instead of using ng-repeat='product in products' use ng-repeat = 'product in products trackby product.id', also you can add pagination or autoscroll if using ng-repeat.
3. Avoid using $scope.$watch instead use $watchcollection
4. Avoid {{ value | filter }}, instead use $filter inside controller.
5. Use ng-if instead of ng-show.
6. If lot of changes happen in ng-model , Debounce it like ng-model-options="{debounce: 250}"
7. Use bind once if possible like below:
{{name}} to {{::name}}
8. Avoid calling $scope.apply and $scope.digest manually, as angularjs automatically calls these process.
If we put :: before value data will work as a one way binding.
No comments:
Post a Comment