I have been learning angularjs for a while, but I have never considered performance issues. Last time I was studying filters, I was involved in performance issues. So I also summarized the commonly used performance optimizations.
Optimize $watch
1. Remove unnecessary watches in time
var unWatch = $scope.$watch('', function() {
// do something
...
if (someCondition) {
unWatch(); // Cancel the monitoring }
});
2. Try to avoid depth watch
We all know that $watch has three parameters, and the third parameter is true, which requires deep monitoring. This parameter is mainly used when nesting objects, but try to avoid it. If you just want to see the changes in basic properties, then don't use the third parameter for deep monitoring, this time it will greatly slow down the time of each monitoring.
-if and ng-show
Try to use ng-if, because the former will not only remove the DOM, but also remove the corresponding watch.
And ng-show is just a simple hidden, but it has actually been loaded.
The ng-show directive switches CSS display properties on a specific element, while the ng-if directive actually deletes the element from the DOM first and recreates if needed. Furthermore, the ng-switch directive is an alternative to ng-if with the same performance advantages.
$apply and $digest
$apply will cause angular to enter the $digest loop, and then iterate from $rootScope to check for changes.
$digest will only check the current scope and its children scope.
So, but we are sure that an operation will only affect the current scope, and using $digest will improve performance slightly.
Optimize ng-repeat
ng-repeat really uses more instructions, but it seems that track by is often ignored.
It is recommended to avoid using ng-repeat in JavaScript to build HTML. For some applications, using ng-repeat increases unnecessary monitors. Using the ng-bind-html directive is a better solution to this problem.
Our ng-repeat often writes this:
ng-repeat="item in items"
But if we write this, when we refresh the page, it will delete all existing DOMs and then recreate and render. But if we add track by, it will be different:
ng-repeat="item in item track by "
In this way, angular will reuse the existing DOM and then update the changed parts. This reduces unnecessary rendering.
Use $watchCollection (including the third parameter)
Usually, only two parameters are used when using $watch, but if you add a third parameter, such as `$watch('value',function(){},true)`, you can ask Angular to perform a depth check (check every property of the object). But this may bring more performance overhead. Therefore, to solve this performance problem, Angular provides `$watchCollection('value', function(){})`, whose third parameter has almost the same function as $watch's, except that it only checks the first layer of object properties to reduce performance overhead.
Use to debug problems
If you are working hard to debug your application to solve performance problems, use this, this is a great API.
Debounce ng-model
You can use ng-model to remove input. For example, to undo search input like GOOGLE, you must use ng-model-options=”{debounce:250}”. Due to the change in the input model, the digest cycle is triggered no more than once every 250ms.
Other optimizations
It's time-consuming, so you must kill it when it is released.
Use filter with caution, and can be pre-processed in the controller.
Try to avoid using broadcast events, and you can use two-way data binding or shared service methods instead.
Summarize
I'm not very comprehensive in summing up, it's just what I often use. With more use, understanding will be further deepened.
refer to:/atian25/blog/issues/5
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.