Angular проблема производительности класса ng, когда слишком много элементов в DOM

Я работал над сложной страницей angular, которая вызывала проблемы с производительностью. Чтобы выделить проблему, я создал здесь скрипт http://jsfiddle.net/4ex2xgL1/3/.

По существу проблема с производительностью вызвана операцией ng-class, которая имеет в ней функцию.

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

Пролет в ng-повторе. При запуске скрипта можно увидеть, что ng-класс запускается несколько раз, когда страница загружается, и на каждом из них он набирается столько раз, сколько количества элементов в списке TODO.

Это намного проще, в моем случае у меня есть 780 элементов на моей странице, и функция заканчивается оценкой aroung 3000 раз!

Одно из решений, которое мы видели, - это разбить область действия, но это приведет к перезаписи моего приложения.

Мы также пробовали https://github.com/Pasvaz/bindonce, но, похоже, он не работает с высокодинамичным контентом.

Любые мысли?

Ответы

Ответ 1

Наконец, я нашел решение, и это поможет значительно улучшить производительность в angular js.

Если ваша модель динамически изменяется, и если у вас много данных, а затем она улучшает работу страниц AngularJS до 1000% и более - не шутите!

За дополнительной информацией вы можете ознакомиться: http://orangevolt.blogspot.in/2013/08/superspeed-your-angularjs-apps.html

Выполните следующие действия:

2.example без библиотеки: (проверьте консоль)

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>

Ответ 2

Я построил дерево с https://github.com/JimLiu/angular-ui-tree с почти 500 элементами для рендеринга с довольно большим количеством слушателей. Для рендеринга требуется 5 секунд. Биндонсе не будет работать там.

Единственное решение - сделать ng-repeat меньше. Держите список маленьким с разбивкой на страницы, поиском или чем угодно. Насколько я знаю, лучший выстрел.

Ну вот мои рекомендации

  • используйте ng-change на флажке, чтобы манипулировать dom или чем-либо, используя ng-класс, это значительно улучшит вашу производительность.

    <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/

  • используйте трек в ng-repeat, если у вас есть идентификаторы, здесь http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/

  • Не показывать 780 элементов в списке. Используйте поисковый ящик, чтобы показать 100 или 50, или вы знаете лучше

  • quick-ng-repeat еще не используется, попробуйте его протестировать https://github.com/allaud/quick-ng-repeat

наконец, несколько хороших http://tech.small-improvements.com/2013/09/10/angularjs-performance-with-large-lists/