Some optimization tips for angularjs_AngularJS

There are already many ways to optimize ng on the Internet. The core starts from the internal properties of the $$watchers scope. Today I will talk about something else. The essence remains the same, because it is a hard part of ng. Injuries, but I believe that as long as we use appropriate techniques, these problems can still be avoided.

ng Introduction

angularjs, referred to as ng, is the mvvm framework produced by Google. It improves the development efficiency of front-end projects (in practice, it can indeed improve development efficiency). It surrounds the entire project with controllers, instructions, and services, and uses unique internal DI to solve the calling problem before the third layer. For more details, please refer to the ng source code analysis I wrote before.

ng’s flaws

When it comes to flaws, let’s first talk about its simple data binding principle

Each model defined on each page in ng will actually add a listener under the current scope. The internal container is the $$wachers array. As long as any model on the page changes, the $digest method inside the scope will be triggered. , it will search all models in the current scope tree in order to ensure that the models on the page can get data synchronization, so this is very time-consuming. The official statement is that when 2000 listeners appear on the page, the page performance will drop significantly. So to improve the performance of ng, we must start from this aspect.

tip1: Bind once

Actually, others have already said this online. Let me talk about the new usage here. The 1.3.0 version of ng has built-in a syntax to support the situation where the model is only bound once. See the following example:
old code

Copy code The code is as follows:

hello

new code

Copy code The code is as follows:

hello

You can see that the new syntax is to add :: in front of the model. I believe this syntax is much more convenient than the third-party plug-ins used online.

Copy code The code is as follows:

tip2: $scope.$digest vs $scope.$apply

I believe many people are familiar with the $apply method. It is generally used when the code is not executed in the ng environment. In order to ensure the data synchronization of the page, calling the $apply method after the code execution is completed will trigger the internal $digest to check the effect. All models in the domain are actually called like this internally. Only some code snippets are written below.

Copy code The code is as follows:

...
...
$rootScope.$digest
...
...

All it actually does is call $digest under the root scope of $rootScope. So what are the differences between $digest under different scopes? In fact, the most important difference is

Copy code The code is as follows:

$digest only deeply searches all models under the caller

Therefore, $scope saves a lot of time in searching for models compared to $rootScope.

However, if you want to ensure the synchronization of all model data on the page, you still have to call $rootScope, so before writing code, it is best to think about which data needs to be changed synchronously.

tip3: Call ng-repeat as little as possible

ng-repeat will create a lot of listeners by default, so when the amount of data is large, this consumes page performance. I think you only need to use ng-repeat when you need to update the data list frequently, otherwise It is also a waste to put so many listeners there. At this time, you can use the $interpolate service that comes with ng to parse a code fragment, which is similar to a static template engine. Its internal mainly relies on the ng core parsing service $parse, and then these The code snippet after filling in the data can be directly assigned to a one-time model.

tip4: Try to write native syntax in the command

Although ng provides a lot of instructions such as ng-show and ng-hide, their function is to display or hide a code fragment according to the true or false of the model. Although it can quickly realize business requirements, these instructions are still A listener will be added by default. If these code snippets exist in a large instruction, a better way is to write .show(), .hide() and other similar jq methods in the instruction link to control it. This way Save the number of listeners. Similar to the built-in event instructions, these can actually be bound to events by using addEventListener in peripheral instructions. Anyway, before writing code, it is best to think about how to increase the number of listeners. At least, this can comprehensively improve page performance.

tip5: Use as few filters as possible on the page

When adding a filter after the model in the page, this will cause the current model to be run twice in $digest, causing unnecessary waste of performance. The first time occurs when $$watchers detects task changes; the second time occurs When modifying model values, try to use inline filter syntax as little as possible, as the following will greatly affect page performance

It is recommended to use the $filter service to call a filter function in the background, which can significantly improve page performance. The code is as follows

Copy code The code is as follows:

$filter('filter')(array, expression, comparator);

Summary

The above are some tips to improve the performance of ng project. Although ng is very powerful, non-standard code will also destroy its performance, so before writing the code, it is best to think about where the listener is not needed. .