Question

我正在角度视图中开发搜索引擎，我想知道搜索引擎是否被使用了太多次并且用户没有离开搜索引擎的视图，我该怎么做才能避免这个问题超载范围？

当我进行大量搜索时，我发现视图速度较慢。我认为这个问题是由范围超载引起的，但我不确定。

一个例子：如果我将请求的结果发送到$scope.variable1并在我再次发出另一个请求并覆盖$scope.variable1.之后......会发生什么？老variable1内的数据结构的观察者是自动删除的吗？

总之，有时当我使用过多次角度视图而不离开时，视图会变慢。处理它的最佳做法是什么？

Answer 1

随时触发范围变量更改摘要周期，意味着检查所有观察者以查看是否有任何更改。（实际上是脏检查的2倍）。在搜索字段中，您应该限制更新范围变量的次数，否则摘要周期将过多。你可以这样做去抖

<input type="text" name="variable1"
             ng-model="variable1"
             ng-model-options="{ debounce: 1000 }" />

当$ scope.variable1更改时，还要确保没有创建新的观察程序。在控制器中声明观察者一次

随时使用：

{{variable}}

您在该页面上隐含地创建了一个观察者。每当您的页面包含超过2000个观察者时，您会看到页面速度变慢，因为摘要周期需要很长时间才能显得很快

您可以使用此代码段来计算页面上观察者的数量：

(function () { 
    var root = angular.element(document.getElementsByTagName('body'));

    var watchers = [];

    var f = function (element) {
        angular.forEach(['$scope', '$isolateScope'], function (scopeProperty) { 
            if (element.data() && element.data().hasOwnProperty(scopeProperty)) {
                angular.forEach(element.data()[scopeProperty].$$watchers, function (watcher) {
                    watchers.push(watcher);
                });
            }
        });

        angular.forEach(element.children(), function (childElement) {
            f(angular.element(childElement));
        });
    };

    f(root);

    // Remove duplicate watchers
    var watchersWithoutDuplicates = [];
    angular.forEach(watchers, function(item) {
        if(watchersWithoutDuplicates.indexOf(item) < 0) {
             watchersWithoutDuplicates.push(item);
        }
    });

    console.log(watchersWithoutDuplicates.length);
})();

如果有很多手表存在，请考虑使用：

{{::variable}}

这将创建一次性绑定并消除页面上的一些观察者。另一个提示是对搜索结果使用分页，这也会限制页面上观察者的数量

而且你可能不应该开始使用观察者。阅读这篇文章：

probably dont need watchers

亲切的问候，

我应该删除Angular手表吗？

1 个答案: