ANGULARJS 7 Recommendations for performance tuning _ANGULARJS

As an excellent web framework, ANGLARJS can greatly simplify the burden of front-end development. Recently Sebastian Fröstl in a blog post "Angularjs performance tuning for Long Lists" that anglarjs in the processing of large lists containing complex data structures, they run very slowly. He also shared the solution in the text. The following is a translation of the text.

Anglarjs is great, but it can run very slowly when working with large lists that contain complex data structures. This is the problem we encountered during the migration of the core management pages to Angularjs. These pages should work smoothly when displaying 500 of rows of data, but the first method of rendering takes 7 seconds.

Later, we found that there were two major performance issues in the implementation process. One is concerned with the "ng-repeat" directive, and the other is related to the filter.

The following will share our experience in solving performance problems in different ways, hoping to bring you inspiration.

　　First, the ng-repeat in the Angularjs when processing a large list, why is the speed slow?

The ng-repeat in Angularjs slows down when processing more than 2,500 two-way data binding. This is because ANGULARJS detects changes through the "dirty checking" function. Each test will take time, so a large list of complex data structures will slow down your application.

　　Second, the prerequisite for high performance

Time Logging Instructions

To measure the time spent on a list rendering, we wrote a simple program to record time by using the attribute "$last" of "ng-repeat". Time is stored in the Timetracker service, so the time record is separated from the server-side data loading.

Post repeat directive for logging the rendering time angular.module (' siapp.services '). Directive (' Postrepeatdirective ', [' $timeout ', ' $log ', ' Timetracker ', function ($timeout, $log, timetracker) {return function (scope , element, Attrs {if (scope. $last) {$timeout (function () {var timefinishedloadinglist = timetracker.reviewlistloaded (); var ref = new Date (timefinishedloadinglist); var end = new Date (); $log. Debug ("# # DOM Rendering list took:" + (END-REF) + "MS");}); Use in HTML: ...

The timeline (Timeline) attribute of the Chrome developer tool

In the Timeline tab of the Chrome Developer tool, you can see events, the number of browser frames per second, and memory allocations. The "Memory" tool is used to detect memory leaks and the memory required by the page. A page flicker problem occurs when the frame rate is less than 30 frames per second. The Frames tool helps you understand rendering performance and also shows the CPU time spent on a JavaScript task.

　Third, by limiting the size of the list to make Basic tuning

The best way to mitigate this problem is to limit the size of the displayed list. Can be achieved by paging, adding an infinite scroll bar.

Paging

Paging, we can use the Angularjs "LimitTo" Filter (AngularJS1.1.4 version later) and the "Startfrom" filter. You can reduce the rendering time by restricting the size of the display list. This is the most efficient way to reduce rendering time.

Pagination in controller $scope. currentpage = 0; $scope. pageSize = 75; $scope. numberofpages = function () {return Math.ceil ($scope. displayeditemslist.length/$scope. pageSize); Start from Filter angular.module (' app. '). Filter (' Startfrom ', function () {return function (input, start) {return Input.s Lice (start); }; Use in HTML//pagination buttons{{$index + 1}}

If you can't/don't want to use pagination, but the filtering process is slow, be sure to check the first five steps and use "Ng-show" to hide the extra list elements.

Infinite scroll bar

If you want to know more about this method, you can access the http://binarymuse.github.io/ngInfiniteScroll/

Four or seven major and excellent rule

1. Render a list without data binding

This is the most obvious solution, because data binding is the most likely source of performance problems. If you just want to display a list once, and you don't need to update or change the data, it's a good idea to discard data binding. Unfortunately, you will lose control of the data, but in addition to the law, we have no choice. Further understanding: Https://github.com/Pasvaz/bindonce.

2. Do not use inline method to compute data

To filter the list directly in the controller, do not use a method that has access to the filter link. "Ng-repeat" evaluates each [$digest (http://docs.angularjs.org/api/ng. $rootScope. Scope expression.) In our case, "Filtereditems ()" Returns a filtered link. If the evaluation process is slow, it will quickly reduce the speed of the entire application.

This is not a good way to evaluate frequently.

This is the method to be adopted.

3. Use two lists (one for view display, one for data source)

The list you want to display is separate from the total list of data, and is a useful model. You can preprocess some of the filters and apply the links stored in the cache to the view. The following case shows the basic implementation process. The filteredlists variable holds the link in the cache and ApplyFilter the method to process the mapping.

/* Controller//Basic list var items = [{name: "John", active:true}, {name: "Adam"}, {name: "Chris"}, {name: "Heather"}]; Init displayedlist $scope. displayeditems = items; Filter Cache var filteredlists[' active ' = $filter (' filter ') (items, {"Active": true}); Apply the filter $scope. ApplyFilter = function (type) {if Filteredlists.hasownproperty (type) {//Check if filter is CA Ched $scope. Displayeditems = Filteredlists[type]; else {/* Non cached Filtering/}}//Reset filter $scope. resetfilter = function () {$scope. displayeditems = items;} /* View */select Active

{{Item.name}}}

4. Use ng-if to replace ng-show in other templates

If you use instructions, templates to render additional information, such as by clicking to display the details of a list item, be sure to use Ng-if (ANGULARJSV. 1.1.5). NG-IF can block rendering (compared to ng-show). So other DOM and data bindings can be evaluated as needed.

The above content to everyone detailed angularjs performance tuning of the 7 recommendations, I hope you like.