首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >角嵌套$scope将产生嵌套$watchers?

角嵌套$scope将产生嵌套$watchers?
EN

Stack Overflow用户
提问于 2016-04-05 10:18:43
回答 2查看 177关注 0票数 0

我遇到了性能问题,我想是因为页面中有很多观察者(超过4000!!)。场景是ng-重复一次的条目列表(小,约5),每一周的每一天都包含另一个ng-重复(so 7),而在每一天的容器中有1或2个输入字段。每一天的元素都有它自己的作用域和控制器,并且在父属性上有一些监视,以便在子更改时更新父状态。因此,有点复杂的scenario...imagine是一个日程视图,其中每天作为一些输入字段或按钮更新主作用域中的相同属性,比如"10天选择/填充/单击“。

我从大约5000名观察者开始,现在减少到大约4000人,去掉一些过滤器,然后切换到翻译指令(角度转换)。

因此,主要的问题是:

如何进一步减少观察者的数量?

是否每个子范围都继承了父监视程序,从而为每个观察者带来了7倍?如果我移除子控制器,将作业留给父任务(传递子项的函数),我会减少观察者的数量吗?这会是一个解决办法吗?任何帮助都是感激的。

EN

回答 2

Stack Overflow用户

发布于 2016-04-05 10:54:17

根据我们的经验,观察人员的数量不会引起速度问题。我们在过去8个月开发单个大型应用程序时遇到的性能问题是由第三部分组件的缓慢造成的。

例如,我们有一个有两个拖放树的页面,有14.600个观察者(因为两棵树中的条目数量都很高)。由于所使用的组件角用户界面树,我们遇到了性能问题,并且减少了它们打开页面的次数,因为大多数树都折叠了。

我们不能更改该组件,因为它是唯一具有树之间拖放功能的组件,但是在另一个页面中,我们在简单列表之间进行了拖放,我们尝试了这两个组件:角拖曳角拖放表。第一个程序有很多性能问题(大约有500个项),而第二个运行非常快。在他关于github的文档中,“为什么还要拖放库?”一节,您可以读到为什么它这么快,为什么另一个速度这么慢。

因此,我可以推测,第三部分的组件会给您带来真正的性能问题,而不是观察者。

在任何情况下,我们通常使用下面这样的检查来编写我们的观察者,除非需要,否则不会运行代码。

代码语言:javascript
复制
$scope.$watch('variableToWatch', function(newValue, oldValue) {
    if (newValue === oldValue) {
        return;
    }

    ... watcher code ...
}

另一种从html中减少观察者的方法是使用单次绑定。示例:

代码语言:javascript
复制
<div ng-if="::vm.user.loggedIn"></div>
票数 1
EN

Stack Overflow用户

发布于 2016-04-05 11:02:33

与性能相关的.--我提出的一种模式是使用私有对象并为便于访问而分配函数的原型。然后在任何函数中,控制器,directives...ect,您可以轻松地访问其他函数的原型、控制器、指令。您可以像使用事件循环一样使用此模式,而不是使用观察者。而不是角度运行,300+观察者每一个消化周期。使用此模式只会触发函数调用。

这种模式的一个例子

代码语言:javascript
复制
var private = {} //accesable to entire app


var app = angular.module('some-app',[])
.controller('someCtrl',['$scope',someCtrl])
.directive('someDirective',someDirective);

function someCtrl($scope){
private.someCtrl = someCtrl.prototype



someCtrl.prototype.update = function(someDate){
//do something....
//access to someCtrl arguments  
  
  $scope.something = someDate
}


}

function someDirective(){

  var someCtrlProto = private.someCtrl;
return{
  link:function(scope ,elm ,attr){
  
    elm[0].addEventListener('click',fucntion(){
           someCtrlProto.update(someData) 
    
      });
      //or
    
    elm[0].addEventListener('click',someCtrlProto.update) //to trigger someCtrl.update from here
    }
  }
}

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36423564

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档