Seven suggestions for AngularJS Performance Tuning _ AngularJS

AnglarJS, as an excellent Web framework, can greatly simplify the burden of front-end development. This article introduces seven suggestions for performance tuning of AngularJS, involving angularjs Performance Tuning knowledge. If you are interested in this article, learn about AnglarJS as an excellent Web framework, this greatly simplifies front-end development. Recently, Sebastian föstl said in an article titled AngularJS Performance Tuning for Long Lists that AnglarJS is very slow when processing large Lists containing complex data structures. He shared the solution in the article. The following is the translation of this document.

AnglarJS is great, but when processing a large list containing complex data structures, it runs very slowly. This is a problem we encountered when migrating the core management page to AngularJS. These pages should have worked smoothly when displaying 500 rows of data, but it took seven seconds to render the first method, which is terrible.

Later, we discovered two major performance problems in the implementation process. One is related to the "ng-repeat" command, and the other is related to the filter.

We will share our experience in solving performance problems through different methods, and hope to give you some inspiration.

I. Why does ng-repeat in AngularJS slow down when processing large lists?

Ng-repeat in AngularJS slows down the speed of processing more than 2500 two-way data bindings. This is because AngularJS uses the "dirty checking" function to detect changes. Each detection takes time, so a large list containing complex data structures can reduce the running speed of your application.

2. Prerequisites for improving performance

Time record command

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

// Post repeat directive for logging the rendering time angular. module ('siapp. services '). directive ('postrepeatctive', ['$ 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 Da Te (); $ log. debug ("# DOM rendering list took:" + (end-ref) + "ms") ;}};}]); // Use in HTML :...

Timeline attribute of Chrome Developer Tools

In the timeline tag of the Chrome developer tool, you can see events, browser frames per second, and memory allocation. The memory tool is used to detect memory leaks and the memory storage required for the page. When the frame rate is lower than 30 frames per second, the page will flash. The frames tool helps you understand rendering performance and shows the CPU time spent on a JavaScript task.

3. Optimize the list by limiting the size of the List

To alleviate this problem, the best way is to limit the size of the displayed list. You can achieve this by paging and adding an unlimited scroll bar.

Paging

Paging, we can use AngularJS's "limitTo" filter (later than AngularJS1.1.4) and "startFrom" filter. You can reduce the rendering time by limiting 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. slice (start) ;}; // Use in HTML // Pagination buttons {{{$ index + 1 }}

If you cannot/do not want to use paging, but the filtering process is slow, check the first five steps and use "ng-show" to hide unnecessary list elements.

Unlimited scroll bar

If you want to learn more about this method, visit the http://binarymuse.github.io/ngInfiniteScroll/

Iv. Seven tuning rules

1. Rendering list without data binding

This is the most obvious solution, because data binding is the most likely root cause of performance problems. If you only want to display the list once and do not need to update or change the data, it is a great way to discard data binding. Unfortunately, you will lose control of the data, but we have no choice but to do so. For more information, see https://github.com/pasvaz/bindonce.

2. Do not use the inline method to calculate data

In order to directly filter the list in the controller, do not use the method that can obtain the filter link. "Ng-repeat" evaluates each [$ digest (http://docs.angularjs.org/api/ng.?rootscope.scope=#digest) % 5D expression. In our case, "filteredItems ()" returns the filter link. If the evaluation process is slow, it will quickly speed down the whole application.

// This is not a good method because frequent evaluation is required.

// This is the method to be used

3. Use two lists (one for View display and one for data source)

The list to be displayed is separated from the total data list, which is a very useful model. You can pre-process some filters and apply the links stored in the cache to the view. The following example shows the basic implementation process. The filteredLists variable stores the cached link. The applyFilter method is used to process the ing.

/* 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 cached $ 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 in Other templates to replace ng-show

If you use commands and templates to render additional information, such as clicking to display details of list items, you must use ng-if (AngularJSv. 1.1.5 or later ). Ng-if can block rendering (compared with ng-show ). Therefore, other DOM and Data Binding can be evaluated as needed.

The above content gives you a detailed explanation of seven suggestions for AngularJS Performance Tuning. I hope you will like it.