当DOM中的元素太多时,Angular ng-class性能问题

Question

我一直在研究一个导致性能问题的复杂角度页面.为了突出问题,我在这里创建了一个小提琴http://jsfiddle.net/4ex2xgL1/3/.

本质上,性能问题是由具有函数的ng-class语句引起的.

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

跨度是ng-repeat.在运行小提琴时,可以看到ng-class在页面加载时被执行多次,并且在每个键上,它被调用与TODO列表中的项目数一样多的时间.

这是一个更简单的情况,在我的情况下,我的页面上有780个项目,该功能最终被评估为3000次!

我们看到的解决方案之一是打破范围,但它几乎会导致我的应用程序重写.

我们还尝试了https://github.com/Pasvaz/bindonce,但它似乎不适用于高度动态的内容.

有什么想法吗？

Answer 1

最后我找到了解决方案，它将有助于提高 Angular js 的性能。

如果你的模型动态变化并且你有大量数据，那么它也会将 AngularJS 页面渲染提高到 1000% 甚至更多 - 不是开玩笑！

有关更多信息，您可以访问：http://orangevolt.blogspot.in/2013/08/superspeed-your-angularjs-apps.html

按照步骤：

1. 从链接下载库：库

2.没有库的示例：（检查你的控制台）

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.带有库的示例：（检查你的控制台）

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>