AngularJS ng重复性能

问题描述

我的html视图上有一个ng-repeat。每当用户选中一个复选框时，就会填充它重复的数组。它的工作方式类似于过滤器。

但是，我遇到了性能问题。似乎再次创建了DOM元素，因此在将结果再次填充到用户界面之前，存在1-1.5秒的“冻结”延迟。

它要重复的数组没有那么大-大约50-60个条目。数组中的每个条目都有两个对象，它们确实具有很多属性。这会影响性能吗？从我阅读的内容来看，这似乎是因为它再次在创建DOM元素。

我尝试使用$ index跟踪，这可以大大加快跟踪速度，但是这会在我显示的div框上引起问题。文字显示错误的结果，变得混乱等。我也尝试使用track by（$ index + item）。没有运气-同样的问题。我也尝试使用track by item.id-但这与不使用track by具有相同的效果-缓慢。

我可以做些什么来优化它吗？还是我只是硬着头皮？

以下是我的代码：

 <div ng-if="$ctrl.hasDataProcessed() && $ctrl.resultsAvailable()">
    <div class="acca-builder-content">
        <div class="acca-builder-header" style="border: 1px solid #1393ED;">{{"RESULTS" | translate}} ({{$ctrl.accaBuilderResultsCount}})</div>
            <ul class="tips-list-group-matches">
                <li ng-repeat="result in $ctrl.accaBuilderResults | orderBy: $ctrl.getSort" ng-class="{'match-has-link': $ctrl.canViewMatch(result.match)}" class="tip-list-group-match">
                    <tf-competition-header ng-if="result.match.CompMasterID" competition="result.match"></tf-competition-header>
                    <match-header match="result.match" tracking-screen="Tips"></match-header>
                </li>
            </ul>
        </div>
    </div>
</div>

在控制器内：

 var buildAccaResultsFromFilter = function () {
            var results = [];
            var tips = ctrl.tips;
            for (var i = 0; i < tips.length; i++) {
                var tip = tips[i];
                if(valueInFilter("COMPETITIONS",tip.match.CompID) &&
                   valueInFilter("DATES",tip.match.MatchDateConverted) &&
                   valueInFilter("SHOW",tip.tip.TipType)) {
                    results.push(tip);
                }
            }
            if(results.length > 0) {
                ctrl.accaBuilderResults = results;
                ctrl.accaBuilderResultsCount = results.length;
                ctrl.resultsFound = true;             
            } else {
                clearaccaBuilderResults();
                ctrl.resultsFound = false;
            }
        };

        // Function called when a checkBox is clicked
        ctrl.onCheckBoxChange = function (option,item) {
            item.checkState = !item.checkState;
            if(item.checkState) {
                addToFilter(option.optionKey,item.textKey);
            }
            else {
                removeFromFilter(option.optionKey,item.textKey);
            }

            if(option.onChange) {
                option.onChange(item.checkState,item.checkId);
            }

            if(ctrl.canBuildAccaResults()) {
                buildAccaResultsFromFilter();
            } else {
                clearaccaBuilderResults();
            }
        };

        // Checks if a value is present within the filter by it's key
        var valueInFilter = function (filterKey,value) {
            return ctrl.filter[filterKey].includes(value);
        };

        ctrl.resultsAvailable = function () {
            return ctrl.accaBuilderResults && ctrl.accaBuilderResults.length > 0;
        };

        ctrl.hasDataProcessed = function () {
            return ctrl.tips && ctrl.competitions;
        };

解决方法

没有看到一些代码，很难进行优化。

您可以尝试消除任何ng-show和ng-hide并仅使用ng-if。如果有的话，它将删除很多观察者。

此外，如果您不需要双向绑定，则可以在指令中使用以下语法。这也会删除观察者。您可以在ng-repeat中删除的观察者越多，越好。

{{:: expression  }}

angularjs angularjs-ng-repeat loops performance performance performance