AngularJS ng 重复性能

Question

我的 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;
        };

Answer 1

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

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

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

{{:: expression  }}