AngularJS - 哪个范围的性能更好？ Object.key 还是一些变量？答案

【问题标题】：AngularJS - Which scope is better performance wise? Object.key or Some Variable?AngularJS - 哪个范围的性能更好？ Object.key 还是一些变量？
【发布时间】：2018-11-20 06:03:30
【问题描述】：

假设我必须存储客户信息，并且要管理双向绑定，我将在这里使用$scope。所以我的疑问是，哪种方法更好？

$scope.firstname = "foo";
$scope.lastname = "bar";
$scope.cellno = "1234567890";
$scope.email = "foobar@example.com";

或

$scope.customerDetailsObj = {};
$scope.customerDetailsObj.firstname = "foo";
$scope.customerDetailsObj.lastname = "bar";
$scope.customerDetailsObj.cellno = "1234567890";
$scope.customerDetailsObj.email = "foobar@example.com";`

我一直对此感到疑惑，因为我有一个大型 Angular 应用程序，有时范围观察者计数超过 1500。我正在使用 chrome 扩展程序来查看观察者计数。

请分享您的观点。谢谢。

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/18128323/…
@RameezRaja 可读性和代码结构管理的答案是正确的，但性能是另一个问题
是的，我关心的是性能。
观察者无论是在观察$scope的属性还是作用域对象的属性，它仍然在执行一个watch函数。手表计数将相同。被监视的项目的名称只被解析一次，当它被添加到监视列表中时。寻找其他地方以提高性能。
看看这个stackoverflow.com/questions/8789969/…

标签： javascript angularjs performance

【解决方案1】：

在我看来，按照angularjs guide 第一种方法（直接绑定到属性）会更有效。指南摘录：

脏检查可以通过三种策略来完成：通过引用，通过收集内容，并按价值。策略的种类不同他们检测到的变化，以及他们的性能特征。

通过引用监视 (scope.$watch (watchExpression, listener)) 在监视表达式返回的整个值时检测到更改切换到新值。如果值是数组或对象，内部的变化不会被检测到。这是最有效的战略。

监视集合内容 (scope.$watchCollection (watchExpression, listener)) 检测在数组或对象：添加、删除或重新排序项目时。这检测很浅 - 它不会进入嵌套集合。观看收藏内容比观看更昂贵参考，因为收集内容的副本需要保持。然而，该策略试图最小化需要复印。

按值监视 (scope.$watch (watchExpression, listener, true)) 可检测任意嵌套数据结构中的任何更改。它是最强大的变更检测策略，但也是最昂贵的。每个节点都需要完整遍历嵌套数据结构摘要，并且需要将其完整副本保存在内存中。

【讨论】：

【解决方案2】：

只谈性能，我认为选项 1（具有普通变量）更有效。

查看普通属性

$watch() 函数，默认情况下只检查对象引用相等性。因此，在每个 $digest 中，它都会检查新旧值是否指向同一个对象。

观察对象和数组

如果你想 $watch() 一个对象，你必须切换到深度监视，这意味着在每个 $digest 中，它会检查整个树以查看结构或值是否发生了变化。所以，物体越大，支票越贵。

$watchGroup()，对象/数组观察者的替代品

如果你有一组相关的属性，比如一个人（名字，姓氏，年龄），你可以像普通属性一样定义它，并使用$watchGroup()，它的工作方式与普通的 $watch() 相同但要查看的属性列表而不是一个。

【讨论】：