DOM中的元素过多时，Angular ng级性能问题

Question

I have been working on a complex angular page which has been causing performance issue. To highlight the problem I have created a fiddle http://jsfiddle.net/4ex2xgL1/3/ here.

Essentially the performance issue is being caused by ng-class statement which has a function in it.

<span class="done-{{todo.done}}" ng-class="myfunction()">{{todo.text}}</span>

The span is in an ng-repeat. On running the fiddle one can see that ng-class gets executed several times when the page loads and on each key up it gets called as many time as number of items in the TODO list.

This is a lot simpler case, in my case I have 780 items on my page and the function ends up being evaluated aroung 3000 times!

One of the solution we saw is to break up the scope but it will cause almost a rewrite of my app.

We also tried https://github.com/Pasvaz/bindonce but it doesn't seem to be working with highly dynamic content.

Any thoughts?

Answer 1

I built a tree with https://github.com/JimLiu/angular-ui-tree with almost 500 items to render, with quite a lot of listeners. It takes 5 seconds to render. Bindonce won't work there.

The only solution out there is make ng-repeat do less. Keep the list small with a pagination, search or anything. Its the best shot as far as I know.

Well here are my recommendations

1. use ng-change on the checkbox to manipulate dom or anything rather using ng-class, it will improve your performance drastically.

   <li ng-repeat="todo in todos track by todo.id"> <input type="checkbox" ng-model="todo.done" ng-change="myfunction()"> <span class="done-{{todo.done}}">{{todo.text}}</span> </li>

   http://jsfiddle.net/4ex2xgL1/3/

2. use track by in ng-repeat if you have ids, more here http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/

3. dont show 780 items in a list. Use a searchbox to show some 100 or 50 or you know better

4. quick-ng-repeat not used yet, try testing it https://github.com/allaud/quick-ng-repeat

finally a few good http://tech.small-improvements.com/2013/09/10/angularjs-performance-with-large-lists/

Answer 2

Finally I found the solution and it will helps lot to improve performance in angular js.

If your model changes dynamically and if you have lots of data and then also it improve AngularJS pages rendering up to 1000% and more - no kidding !.

Fore more information you can visit : http://orangevolt.blogspot.in/2013/08/superspeed-your-angularjs-apps.html

Follow the steps:

1. download the library from the link: library

2.example without library:(check your console)

 function MyController( $scope) { var entries = [ { label : 'one', value : 'first entry'}, { label : 'two', value : 'second entry'}, { label : 'three', value : 'third entry'} ]; $scope.label =""; $scope.value =""; $scope.order = 'label'; $scope.add = function() { entries.push({ label : $scope.label, value : $scope.value }); }; $scope.getEntries = function() { console && console.log( "getEntries() called"); return entries; }; } 

 <script src="https://raw.githubusercontent.com/lodash/lodash/2.4.1/dist/lodash.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <form name="myform" ng-app ng-controller="MyController"> Label/Value : <input type="text" required ng-model="label"> <input type="text" required ng-model="value"> <button ng-disabled="!myform.$valid" ng-click="add()" >Add</button> <fieldset> <legend> Entries sorted by <select ng-model="order" ng-options="property for property in [ 'label', 'value']"> </select> </legend> <div ng-repeat="entry in getEntries() | orderBy:order"> {{entry.label}} = "{{entry.value}}" </div> </fieldset> </form> 

3.example with library:(check your console)

 function MyController( $scope) { var entries = [ { label : 'one', value : 'first entry'}, { label : 'two', value : 'second entry'}, { label : 'three', value : 'third entry'} ]; $scope.label =""; $scope.value =""; $scope.order = 'label'; $scope.add = function() { entries.push({ label : $scope.label, value : $scope.value }); // clear cache $scope.getEntries.cache = {}; }; $scope.getEntries = _.memoize( function() { console && console.log( "getEntries() sorted by '" + $scope.order + " 'called"); // return entries sorted by value of $scope.order return _.sortBy( entries, $scope.order); }, function() { // return the cache key for the current result to store return $scope.order; } ); } 

 <script src="https://raw.githubusercontent.com/lodash/lodash/2.4.1/dist/lodash.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <form name="myform" ng-app ng-controller="MyController"> Label/Value : <input type="text" required ng-model="label"> <input type="text" required ng-model="value"> <button ng-disabled="!myform.$valid" ng-click="add()" >Add</button> <fieldset> <legend> Entries sorted by <select ng-model="order" ng-options="property for property in [ 'label', 'value']"> </select> </legend> <div ng-repeat="entry in getEntries()"> {{entry.label}} = "{{entry.value}}" </div> </fieldset> </form>