Angularjs to organize some of the best tips _angularjs

About optimizing ng means there's a lot on the web, the core is all from the $ $watchers the scope of the intrinsic properties, today I say something else, the essence of the same, because this is Ng's mishap, but I believe that as long as the use of appropriate methods, these problems can be avoided.

Introduction to Ng

Angularjs Ng is Google's MVVM framework, which improves the efficiency of front-end project development (in practice it does improve development efficiency), with controllers, instructions, services around the entire project, Internal with unique di to solve the three-layer call before the problem. More details can refer to the NG source analysis I wrote earlier.

Ng's mishap.

When it comes to the mishap, it's a simple principle of data binding.

The model defined on each page in Ng will actually add a listener under the current scope, the internal container is $ $wachers array, as long as any one of the page model changes, will trigger the scope of the internal $digest method, It finds all the model in the current scope tree in turn, is to ensure that the model on the page can get data synchronization, so this is very time-consuming program, the official saying is that when 2000 listeners on the page, the page performance will be significantly reduced. So to improve the performance of NG, we must start from this aspect.

TIP1: Bind Once

In fact, the internet has been said, here next new usage, Ng's version of 1.3.0+ has provided a syntax to support the model only binding once, look at the following example

Old Code

Hello

New Code

Hello

You can see that the new syntax is in front of the model Plus:: Believe this syntax is more convenient than the Third-party plug-ins used online.

TIP2: $scope. $digest vs $scope. $apply

I believe many people are not unfamiliar with the $apply method, it is commonly used when the code is not executed in the NG environment, in order to ensure the data synchronization of the page, the call to the $apply method after the completion of the code execution will trigger the internal $digest to check all the models in the scope, in fact, it is called in the internal , just write some code snippets here

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

All of which is actually called $digest under the $rootscope root scope, so what's the difference between $digest in different scopes? The most important difference is

$digest only depth to find all models below the caller

So $scope has to save a lot of time to find the model compared to $rootscope.

However, to ensure that all model data on the page is synchronized, or call $rootscope, so before writing the code, it is best to think about what data is synchronized change.

TIP3: Call Ng-repeat as little as possible

Ng-repeat will create a lot of listeners by default, so when the volume of data is very large, this very consuming page performance, I feel that only when you need to update the list of data often need to use ng-repeat, or put so many listeners there is also a waste, at this time can be used with Ng's own $ The Interpolate service parses a piece of code, similar to a static template engine, whose interior relies primarily on the NG Core parsing service $parse, and then assigns the code snippet that fills the data directly to a one-time model.

TIP4: Try to write native grammar in instructions

Although NG provides a lot of instructions such as ng-show,ng-hide, they are to show or hide a piece of code based on the true,false of the model, although it can quickly implement the business requirements, but these instructions still add listeners by default, If the code fragment exists in a large instruction, a better way is to write it in command link. Show (),. Hide () These similar JQ methods to control the better, so that you can save the number of listeners, similar to the own event instructions, In fact, these can be in the peripheral instructions by using AddEventListener to bind the event, anyway, before writing code, it is best to think about how to minimize the number of listeners, so as to improve the overall performance of the page.

TIP5: Use filters as little as possible inside the page

When you add filter behind the model in the page, this will cause the current model to run two times in $digest, causing unnecessary performance waste. The first time when the $ $watchers detection task changes, and the second occurs when the model value is modified, so as to minimize the inline filter syntax, Very impacting page performance like the following

It is recommended to use the $filter service to invoke a filter function in the background, which can significantly improve the performance of the page, the following code

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

Summarize

These are some tips to improve the performance of NG projects, although NG is very powerful, but the nonstandard code can also damage its performance, so before writing code, it is best to conceive where the listener is not needed.

The above is the ANGULARJS optimization of the information on the follow-up to continue to supplement the relevant information, thank you for your support of this site!