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

Question

作为一项要求，我必须针对模拟数据分析几个 AngularJS 组件(例如 ng-grid、IE8 中的数据表、Chrome 和 FF)的性能基准。我有模拟数据。

现在，当使用 IE8 Profiler 时，我获得了几个函数的时间(毫秒)。根据 AngularJS 调用结构，应该 $digest time(Inclusive Time，根据 IE8 分析器)反射(reflect)页面的加载时间，或 $digest 的总和& $apply ?我是 AngularJS 的新手，所以对这些概念的解释会很好!

Answer 1

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

$apply 函数本身相对较轻(您可以在 Angular 源中检查它)。在 $digest 期间评估观察者和比较值(脏检查)的过程可能会变得昂贵。因此，迄今为止的性能测试一直专注于测量 $digests。一些例子:

How does data binding work in AngularJS? (见米斯科的回答)

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/ .相关摘录:

$摘要:

The $digest cycle starts as a result of a call to $scope.$digest(). Assume that you change a scope model in a handler function through the ng-click directive. In that case AngularJS automatically triggers a $digest cycle by calling $digest(). When the $digest cycle starts, it fires each of the watchers. These watchers check if the current value of the scope model is different from last calculated value. If yes, then the corresponding listener function executes. As a result if you have any expressions in the view they will be updated. In addition to ng-click, there are several other built-in directives/services that let you change models (e.g. ng-model, $timeout, etc) and automatically trigger a $digest cycle.

$申请:

AngularJS ... will account for only those model changes which are done inside AngularJS’ context (i.e. the code that changes models is wrapped inside $apply()). Angular’s built-in directives already do this so that any model changes you make are reflected in the view. However, if you change any model outside of the Angular context, then you need to inform Angular of the changes by calling $apply() manually. It’s like telling Angular that you are changing some models and it should fire the watchers so that your changes propagate properly.