我应该删除Angular手表吗?

Should I remove Angular watches?

本文关键字：手表 Angular 删除 我应该      更新时间：2023-09-26

我正在开发一个搜索引擎内部角视图，我想知道如果搜索引擎被使用太多次，用户不离开搜索引擎的视图，我应该怎么做，以避免超载范围的问题?

当我执行大量搜索时，我可以注意到视图变慢了。我认为这个问题是由作用域过载引起的，但我不确定。

一个例子:如果我得到一个请求的结果进入$scope.variable1，然后我再次发出另一个请求并覆盖$scope.variable1. ..发生了什么?旧variable1内部数据结构的观察者是否自动删除?

总而言之，有时当我多次使用一个角度视图而不离开它时，视图会变慢。处理它的最佳实践是什么?

只要作用域变量发生变化，就会触发一个摘要循环，这意味着会检查所有的观察者是否发生了变化。(实际上是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}}

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

，最后你可能一开始就不应该使用观察者。阅读本文:

可能不需要观察者

亲切的问候,

相关文章：