javascript - Angular 渲染性能和优化

Question

任何人都可以确认或否认以下情况，并解释你的推理吗？我认为这会导致两次 UI 渲染，因此性能较低。

假设在 Angular 中，您有一个连接到 UI 中的下拉列表的数据模型。您从一个对象数组的数据模型开始，清除该数组，然后用完全相同的对象重新填充该数组，这些对象的不同之处仅在于属性已更改:

  [obj1, obj2, obj3, obj4]
  // clear the array
  [] // the first UI render event occurs
  // you fill the array with new objects that are the same except the value
  // of one property has changed from true to false
  [obj1, obj2, obj3, obj4] // a second UI render event occurs

我认为这更具性能:

  [obj1, obj2, obj3, obj4]
  // change a property on each object from true to false
  [obj1, obj2, obj3, obj4] // a single render event occurs

感谢您查看此内容。

Answer 1

如果第一个示例中的步骤应该同步运行，则该假设是错误的。由于 JavaScript 是单线程的，因此 Angular 甚至没有机会注意到您在重新填充数组之前已经清空了数组。 例如:

 // $scope.model === [obj1, obj2, obj3, obj4];
 $scope.model.length = 0; // clear the array
 // $scope.model === [] but no UI render occurs here
 $scope.model = [obj5, obj6, obj7, obj8]; //re-fill with new objects
 //UI render will happen later, and angular will only see the change
 //from [obj1, obj2, obj3, obj4] to [obj5, obj6, obj7, obj8]

如果更改应该涉及异步性，那么这些异步操作中的延迟可能比中间的空数组渲染花费更多的时间，所以我也不会担心这一点。

可能的性能差异来自其他方面，例如创建新对象或在引用未更改时需要进行深度相等检查的 Angular 。

不过，我怀疑这会成为任何 Angular 应用程序的瓶颈，因此我建议您选择更适合您的代码风格的内容。 (尤其是可变对象与不可变对象(immutable对象)是一个非常重要的设计决策)。