当 DOM 中的元素过多时，Angular ng-class 性能问题 [英] Angular ng-class performance issue when too many elements in DOM

问题描述

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

本质上，性能问题是由 ng-class 语句引起的，其中包含一个函数.

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

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

这是一个简单得多的案例，在我的案例中，我的页面上有 780 个项目，该函数最终被评估了 3000 次！

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

我们也尝试过 https://github.com/Pasvaz/bindonce 但它似乎没有高度动态内容.

有什么想法吗?

解决方案

我终于找到了解决方案，它将对提高 angular js 的性能有很大帮助.

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

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

请按照以下步骤操作:

1. 从链接下载库:库

2.没有库的例子:(检查你的控制台)

function MyController( $scope) {var 条目 = [{标签:'一个'，值:'第一个条目'}，{标签:'两个'，值:'第二个条目'}，{标签:'三'，值:'第三个条目'}];$scope.label ="";$scope.value="";$scope.order = '标签';$scope.add = function() {条目.推送({标签:$scope.label，价值:$scope.value});};$scope.getEntries = function() {控制台&&console.log("getEntries() 调用");返回条目；};}

<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">标签/值:<input type="text" required ng-model="label"><input type="text" required ng-model="value"><按钮ng-disabled="!myform.$valid"ng-click="添加()">添加</按钮><字段集><传说>条目排序方式<选择ng-model="订单"ng-options="property for property in ['label', 'value']"></选择></图例><div ng-repeat="entry in getEntries() | orderBy:order">{{entry.label}} = "{{entry.value}}"

</fieldset>

3.example with library:(检查你的控制台)

function MyController( $scope) {var 条目 = [{标签:'一个'，值:'第一个条目'}，{标签:'两个'，值:'第二个条目'}，{标签:'三'，值:'第三个条目'}];$scope.label ="";$scope.value="";$scope.order = '标签';$scope.add = function() {条目.推送({标签:$scope.label，价值:$scope.value});//清除缓存$scope.getEntries.cache = {};};$scope.getEntries = _.memoize(功能() {控制台&&console.log("getEntries() 按 '" + $scope.order + " '被调用");//返回按 $scope.order 的值排序的条目返回 _.sortBy( 条目，$scope.order);},功能() {//返回要存储的当前结果的缓存键返回 $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">标签/值:<input type="text" required ng-model="label"><input type="text" required ng-model="value"><按钮ng-disabled="!myform.$valid"ng-click="添加()">添加</按钮><字段集><传说>条目排序方式<选择ng-model="订单"ng-options="property for property in ['label', 'value']"></选择></图例><div ng-repeat="entry in getEntries()">{{entry.label}} = "{{entry.value}}"

</fieldset>

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?

解决方案

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>

这篇关于当 DOM 中的元素过多时，Angular ng-class 性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！