There are already many ways to optimize ng online. The core is all about the internal attributes of the scope of $$watchers. Today I will talk about something else, the essence remains unchanged because this is a flaw of ng. However, I believe that as long as you use appropriate methods, these problems can still be avoided.
Introduction
angularjs is abbreviated as ng, which is an mvvm framework produced by Google. This improves the development efficiency of front-end projects (in practice, it can indeed improve development efficiency). It uses controllers, instructions, and services to revolve around the entire project, and uses unique DI to solve the calling problems before the third layer. For more details, please refer to the ng source code analysis I wrote before.
ng's hard wound
When it comes to flaws, we must first talk about its simple data binding principle
The model defined on each page in ng will actually add a listener to 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 for all models in the current scope tree in turn to ensure that the models on the page can get data synchronization, so this is very time-consuming. The official statement is that when 2,000 listeners appear on the page, the page performance will drop significantly. Therefore, to improve the performance of ng, you must start from this aspect.
tip1: One-time binding
In fact, someone else has already said this online. Here is a new usage. The 1.3.0+ version of ng has already provided a built-in syntax to support the situation where the model is bound only once. See the following example:
old code
The code copy is as follows:
hello
new code
The code copy 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.
The code copy is as follows:
tip2: $scope.$digest vs $scope.$apply
I believe many people are familiar with the $apply method. It is generally used when executing code in the ng environment, in order to ensure the data synchronization of the page, calling the $apply method after the code execution will trigger the internal $digest to check all models in the scope. In fact, this is called inside it, and only some code snippets are written below.
The code copy is as follows:
...
...
$rootScope.$digest
...
...
All of them are actually calling $digest under the root scope of $rootScope. So what is the difference between $digest under different scopes? In fact, the most important difference is that
The code copy is as follows:
$digest Only deep searches all models below the caller
Therefore, compared with $scope, $rootScope, it saves a lot of time to find models.
However, if you want to ensure the synchronization of all model data on the page, you still have to call $rootScope, so it is best to think about which data should be synchronized before writing the code.
tip3: Call ng-repeat as little as possible
ng-repeat will create many listeners by default, so when the data volume is large, this consumes page performance. I think ng-repeat is only needed when you need to update the data list frequently, otherwise it would be a waste to put so many listeners there. At this time, you can use ng's own $interpolate service to parse a code snippet, similar to a static template engine, which mainly relies on ng's core parsing service $parse, and then directly assign these code snippets after filling the data to a one-time model.
tip4: Try to write native syntax in the command
Although ng provides many instructions such as ng-show and ng-hide, their function is to display or hide a code snippet based on the true and false of the model. Although it can quickly implement business requirements, these instructions will still add listeners by default. If these code snippets exist in a large instruction, the better way is to write similar jq methods such as .show() and .hide() in the instruction link to control it better, which can save the number of listeners, and similar event instructions. These can actually be bound to events in peripheral instructions by using addEventListener. Anyway, before writing code, it is best to think about how to minimize the number of listeners, so that the page performance can be comprehensively improved.
tip5: Use filters as little as possible on the page
When adding filters behind the model in the page, this will cause the current model to run twice in $digest, causing unnecessary performance waste. The first time is when the $$watchers detection task changes; the second time occurs when the model value is modified, so try to use the filter syntax when inline as little as possible. Such as the following greatly affects the performance of the page
It is recommended to use the $filter service to call a filter function in the background, which can significantly improve the page performance. The code is as follows
The code copy is as follows:
$filter('filter')(array, expression, comparator);
Summarize
The above are some tips to improve the performance of ng projects. Although ng is very powerful, irregular code will also destroy its performance. Therefore, it is best to think about where listeners are not needed before writing code.