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

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>