如何分析AngularJS组件中的性能基准？

Question

作为一个需求，我必须分析几个AngularJS组件的性能基准，例如ng网格、IE8中的数据表、Chrome和FF中的模拟数据。我已经准备好了模拟数据。

现在，当使用IE8 Profiler时，我得到了几个函数的时间(ms)。根据AngularJS调用结构，$digest时间(按照IE8分析器的包含时间)是否应该反映页面的加载时间，还是$digest & $apply的总和？我是AngularJS的新手，所以解释一下这些概念会很好！

Answer 1

注意，调用$apply将在$rootScope上触发$digest，这意味着$digesting所有子作用域。

$apply函数本身相对较轻(您可以在角源中检查它)。在$digest期间评估观察者和比较值(脏检查)的过程可能会变得很昂贵。正因为如此，性能测试到目前为止一直集中在测量$digests。下面是一些例子：

How does data binding work in AngularJS? (见Misko的回答)

How Do I Measure the Performance of my AngularJS app's digest Cycle?

http://blog.scalyr.com/2013/10/angularjs-1200ms-to-35ms/

这是对$apply和$digest：http://www.sitepoint.com/understanding-angulars-apply-digest/之间区别的一个很好的解释。有关摘录：

$digest：

$digest循环是从调用$scope.$digest()开始的。假设您通过ng-click指令更改了处理程序函数中的作用域模型。在这种情况下，AngularJS通过调用$digest()自动触发$digest循环。当$digest循环开始时，它会激发每个观察者。这些观察者检查作用域模型的当前值是否与上次计算值不同。如果是，则执行相应的侦听器函数。因此，如果视图中有任何表达式，它们将被更新。除了ng单击之外，还有其他一些内置指令/服务可以让您更改模型(例如ng模型、$timeout等)并自动触发$digest循环。

$apply：

AngularJS ...将只考虑那些在AngularJS上下文中完成的模型更改(即更改模型的代码包装在$apply()中)。角的内置指令已经这样做了，所以您所做的任何模型更改都会反映在视图中。但是，如果在角上下文之外更改任何模型，则需要手动调用$apply()通知角。这就像告诉角，你正在改变一些模型，它应该激发观察者，以使你的变化正确传播。