Some optimization tips from angularjs

There are many ways to optimize ng on the Internet, the core of which is from the inside of the scope of $$watchers. Today, I want to talk about something else. The essence is still the same, because this is a hard problem for ng.

Ng profile

Angularjs ng for short, is Google released MVVM framework, this in improving the efficiency of the front-end project development practice, it is really can improve the efficiency of development), controller, commands, services to around the whole project, internal to solve the three layers with unique DI before the invocation of the problem. More details information you can refer to written before I ng source analysis.

Ng the shortcomings

Speaking of hard injury, we need to talk about its simple data binding principle

Ng on every page in the definition of the model is actually under the current scope to add a listener, internal container is $$wachers arrays, as long as any one page model change, will trigger the scope within $digest method, it will, in turn, to find all the model in the current scope tree, is the guarantee on the page model can get the data synchronization, so the program is very consumption time, the official version is when 2000 listeners to appear on the page, the page properties will be significantly lower. So to improve the performance of the ng from the aspects of.

Tip1: one binding

As you can see, the new syntax is to add :: in front of the model, which I believe is more convenient than third-party plugins used on the Internet.

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

Believe $the apply method is not strange to many people, it is generally used in, when not on the ng environment executing code, in order to ensure that the page data synchronization, after the completion of a code execution call $$apply method will trigger the internal digest to check all the models in the scope, actually within it is such a call, only to write some code snippet below.

...

...

$rootScope.$digest

...

...

So it's actually calling $digest in the rootScope of $rootScope, so what's the difference between $digest in different scopes ? The most important difference is this

$digest  Only look in depth for all the models below the caller 

So $scope saves a lot of time looking up models compared to $rootScope.

To keep all the model data synchronized on the page, however, you still have to call $rootScope, so it's a good idea to think about which data to synchronize before you write code.

Tip3: make as few ng-repeats as possible

Ng - repeat the default will create many listeners, so the amount of data is very big, the consumption of this very page performance, I think only when the need to frequently updated data list only need to use ng - repeat, if not put so many listeners there is also a waste, this time can use ng own $interpolate service to resolve a snippet, similar to a static template engine, its internal mainly depends on ng core analytical service $parse, then put these populate the data after the code snippet directly assigned to a one-time model can.

Tip4: try to write native syntax in instructions

Although ng provides many instructions such as ng - show, ng - hide, their role is actually based on the model of true, false to show or hide a snippet, although can very quickly realize the business requirement, but these instructions or default will add listeners, if the code snippets are in a big order, a better approach is to write in the command link. The show (), . Hide () these similar jq method to control is better, so that we can save the number of listeners, similar and bring order of events, these all can be in the peripheral instruction by using addEventListener to bind event, anyway, before writing code, it is best to think about how to keep the number of listeners, at least in this way can comprehensively improve page performance.

Tip5: use filters as little as possible in the page

When a filter is added after the model in the page, this will cause the current model to run twice in $digest, resulting in unnecessary performance waste. The second time occurs when the model values are modified, so use less of the inline filter syntax, which can have a significant impact on page performance, as shown below

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

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

conclusion

The above are some tips for improving the performance of ng projects. While ng is powerful, it is important to think about where you don't need listeners before you write.