How much do you know about angularjs performance optimization? Here is the detailed angularjs performance optimization process

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

1. Optimize $watch

1. Remove unnecessary watches in time

var unWatch = $scope.$watch('', function() {
    // do something
    ...
    if (someCondition) {
        unWatch();    // 取消监听
    }
});

2. Try to avoid deep watches

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.

3.ng-if and ng-show

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)

2. $apply and $digest

$apply This will cause angular to enter the $digest loop, and then start traversing from $rootScope to check for changes.

$digestOnly 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.

3. Optimize ng-repeat

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.

4. Other optimizations

• 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.

5. Summary about angularjs

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!