Performance optimization based on angularjs/ionic framework Development

Angularjs as a powerful front-end MVVM framework, although a lot of performance optimizations have been done, the improper use of our development process can have a huge impact on performance.

Here are some ways to optimize:

1. Use a single binding symbol {{:: value}}

One of the performance optimization methods of ANGULARJS is to reduce the two-way binding. We know that Angularjs's two-way binding is by adding $ $watchers for each data object that requires two-way binding, and once the data for a scope is updated, the Dirty Detection ($digest) is triggered, and the depth first traverses the $$ of all scope objects The old/new value of watchers values is changed. So in the development process, we have to be careful to determine whether each of the $ $watchers created is necessary. For data that needs to be updated only once, regardless of how the data layer changes, using two consecutive colons to delete this value in the $ $watchers list reduces the $digest dirty detection cycle.

2. Ng-repeat optimization

The first way, although the number of dirty detection is reduced, but a single binding of the data a few, may add a single binding, performance improvement is not too large. If we use Ng-repeat in our code and the list size is large, we will have a significant decrease in performance, especially on the mobile side. The following points are optimized for the Ng-repeat directive.

• Use LimitTo to reduce the number of first load list elements to increase the speed at which the page is initialized. We may have hundreds of thousands of data to display, but the size of the screen is limited after all, it may be a 1280x800 or 360x640-sized screen in front of the user, we can load the user can see a few more than 10 lists. This functionality is provided by the LimitTo property.

<li ng-repeat= "Mail in mails |limitto:loadmaillimitto" ></li>

• Use the track by property. For example, we have the following code

<ul>    <li ng-repeat= "mail in mails" >        {{mail.id}}:{{mail.title}}    </li></ul>  

If we want to update the values inside the mails, we might do this:

1	$scope.mails = newMailListFromServer;

The last line of code tells Ng-repeat to remove all the LI elements and regenerate a new set of Li, which means a lot of DOM operations, especially when the LI element has complex logic judgments and two-way binding data. This is because Ng-repeat will add the $hashkey attribute to each mail when it is created, and keep track of it, once the mails element is replaced with the object returned by the server, immediately they are exactly the same, because they do not have $hashkey, So ng-repeat will not know that they are the same element. And by the following changes:

<li ng-repeat= "mail in mails track by Mail.id" ></li>

Ng-repeat will track the mail.id we created to determine if it is a new element. This reduces the number of DOM deletions to add operations.
It is important to note that if LimitTo and track are used together, you need to put track by to the end, as

<li ng-repeat= "Mail in mails | Limitto:loadmaillimitto track by Mail.id "></li>

• If you have introduced the Ionic framework, you can use Collection-repeat instead of ng-repeat.

Collection-repeat is the ionic framework's own set of instructions to display list, the principle is that no matter how large the list, the page has a maximum of a certain number of item, the size of the item number is calculated by the screen height and the height of a single item. When you swipe a list, all items are rendered by updating the page content and location of the item element. So in a large number of list rendering, Collection-repeat will be much better than ng-repeat performance. However, it is important to note that because Collection-repeat is implemented by updating the item contents of the sliding position at all times, the single-pass binding of the first method is used inside the item, which causes the page to become cluttered after sliding.

3. Reduce the filter in the HTML page

The reason is that whenever the filter is executed, it will go two times $digest cycle, once the scope of data changes, one is to see if there are more changes to update the data. This can have a significant impact on performance when the amount of data is large. We can use the $filter provider provided by angular in our JS code to preprocess our data at initialization time by formatting good data, such as assigning values to the view layer.

4. Ng-if Replacement Ng-show/ng-hide

The reason is that the difference between ng-if and Ng-show/ng-hide is that ng-if will remove the element from the DOM when it equals false, so all handler bound to that element will fail together. The ng-show/ng-hide does not remove DOM elements, but instead uses CSS style to hide/display DOM elements, so handlers will always exist.

5. $scope. $apply () and $scope. $digest ()

We'll use both of the above to perform a dirty check and refresh the page data. The difference is $scope. The $apply () starts from $rootscope, and the depth first traverses the execution $digest loop, while the $scope. $digest starts at the current scope and traverses the dirty detection down the scope. You can use $scope. $digest () If you are only expecting data updates for the current scope and not the parent $scope.

6. Angular Animate

If our project introduces a angular-animate.js module, the code in animate will be executed on most elements that use the instruction, regardless of whether the current element has a CSS animation style applied. This on our page if there is a large amount of data sliding frequently, hide the display when there will be more obvious performance problems. We can add $animate.enabled (false) to the current scope initialization if we don't animate the current scope, but we can also disable animation for an element: $animate. Enabled ( element, false);

7. Ionicslidebox optimization (only for projects that use the Ionic framework)

• Initializing Slidebox first displays the middle of the slide displayed first in front of the user, and the other slide can defer initialization in $timeout. The limitto of thought and ng-repeat are similar.
• Slidebox sliding speed in the ionic frame the default speed is 300ms sliding through a slide, changing this speed to make the swipe faster.

Performance optimization based on angularjs/ionic framework Development