javascript - Angular - 嵌套 $scope 会产生嵌套 $watchers?

标签 javascript angularjs performance scope angularjs-ng-repeat

我遇到了性能问题,我认为是由于页面中有很多观察者(超过 4000 个!!)。该场景是 ng-repeat 中的一个(小,大约 5 个)项目列表,每个项目都包含一周中的每一天的另一个 ng-repeat(因此 7),并且在每个天的容器中都有 1 或 2 个输入字段。每天的元素都有自己的作用域和 Controller ,并且监视父级的属性,以便在子级更改时更新父级状态。所以有点复杂的场景......想象一个议程 View ,其中每天都有一些输入字段或按钮更新主范围中的相同属性,例如“选择/填充/单击的 10 天”。

我一开始有大约 5000 个观察者,现在减少到大约 4000 个,删除了一些过滤器并切换到 translate-once 指令,而不是 translate( Angular 翻译)。

所以主要问题是:

如何进一步减少观看人数?

是否每个子作用域都继承父观察者,导致每个观察者的 7x ?如果我删除子 Controller ,将工作留给父级(在函数中传递子项),我会减少观察者的数量吗?这可能是一个解决方案吗?任何帮助都是值得赞赏的。

最佳答案

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

例如,我们有一个页面,其中有两个拖放树,有 14.600 个观察者(因为两个树中的项目数量都很高)。由于使用的组件,我们遇到了性能问题,angular-ui-tree ,我们减少了打开页面的次数,大部分树都折叠了。

我们无法更改该组件,因为它是唯一具有树之间拖放功能的组件,但在另一个页面中,我们在简单列表之间进行了拖放,我们尝试了这两个组件:angular-dragdropangular-drag-and-drop-lists 。第一个有很多性能问题(大约 500 个项目),而第二个运行速度非常快。在他的 github 文档中,"Why another drag & drop library?" 部分您可以阅读为什么它如此快而另一个如此慢。

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

无论如何,我们经常为观察者编写如下检查,以便除非需要,否则不运行代码。

$scope.$watch('variableToWatch', function(newValue, oldValue) {
    if (newValue === oldValue) {
        return;
    }

    ... watcher code ...
}

减少 html 观察者的另一种方法是使用 one-time-binding 。 示例:

<div ng-if="::vm.user.loggedIn"></div>

关于javascript - Angular - 嵌套 $scope 会产生嵌套 $watchers?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36423564/

相关文章:

java - 返回 hashmap 对象而不是显式定义的 dto 实例(不好的做法?)

javascript - jQuery 两个不同的选择器,但定义 $(this) 取决于哪一个

javascript - 单元测试指令和isolatedScope不是一个函数

C++ 排序 vector<double> vs vector<Object> 以 double 成员变量为键

c++ - 多维数组与平面数组 - 性能比较

javascript - AngularJS - 如何获取 ng-repeat 中每个项目的坐标?

javascript - 我在 angular js Uncaught Error : [$injector:modulerr] 中收到这样的错误

database - 使用 AngularFire 从 Firebase 中选择随机记录

angularjs - 使用 AngularJS 路由持久化查询字符串

mysql - EXISTS 和 JOIN 检查记录是否存在的区别