I have known angularjs
for a while, but I have never considered performance issues. The last time I was studying filters, performance issues were involved. So I also summarized commonly used performance optimizations. Let’s take a look together
var unWatch = $scope.$watch('', function() { // do something ... if (someCondition) { unWatch(); // 取消监听 } });
We all know that $watch
has three parameters, and the third parameter is true
for in-depth monitoring. This parameter is mainly used when nesting objects, but try to avoid using it. If you just want to see the changes in basic properties, then don’t use the third parameter for in-depth monitoring. This will greatly slow down each process. The time for one listening session.
Try to use ng-if
, because the former will not only remove DOM
, but also move Except the corresponding watch
.
And ng-show
is simply hidden, but it has actually been loaded. (If you want to learn more, go to the PHP Chinese websiteangularjs learning manual column to learn)
$apply
This will cause angular
to enter the $digest loop
, and then start traversing from $rootScope
to check for changes.
$digest
Only checks the current scope
and its subscope
.
So, but we are sure that a certain operation will only affect the current scope
, and using $digest
will slightly improve performance.
ng-repeat
I really use a lot of instructions, but I seem to often ignore track by
.
Our ng-repeat
often writes like this:
ng-repeat="item in items"
But if it is written like this, when we refresh the page, it will delete all existing DOM , then recreate and render. But it will be different if we add track by
:
ng-repeat="item in item track by item.id"
In this way, angular will reuse the
existing DOM and then update the changed parts. This reduces unnecessary rendering.
console.log
is very time-consuming and must be cleared when publishing.
Use filter with caution, it can be pre-processed in controller
.
Try to avoid using broadcast events. You can use two-way data binding or shared service
instead.
I haven’t summarized it completely, it’s just what I commonly use. With more use, understanding will deepen further. (Finally, I recommend the angularjs Reference Manual column on the PHP Chinese website, where you will find the angularjs content you want to learn)
[Editor’s recommendation]
angularjs expression How to use formula? Examples of using expressions in angularjs
What are the differences between angularjs and jQuery? Results of angularjs comparison with jQuery
The above is the detailed content of How much do you know about angularjs performance optimization? Here is the detailed angularjs performance optimization process. For more information, please follow other related articles on the PHP Chinese website!