如何分析AngularJS组件中的性能基准? [英] How to analyze performance benchmark in AngularJS components?

问题描述

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

现在使用IE8 Profiler时，我需要几个函数的时间(毫秒).按照AngularJS调用结构，$digest时间(根据IE8探查器，包括时间)应反映页面的加载时间，或$digest和&的总和. $apply?我是AngularJS的新手，所以对这些概念进行解释会很好！

解决方案

请注意，调用$ apply将触发$ rootScope上的$ digest，这意味着$ digested了所有子作用域.

$ apply函数本身相对较轻(您可以在角度源中对其进行检查).这是在$ digest期间评估观察程序并比较值(脏检查)的过程，该过程可能会变得昂贵.因此，迄今为止，性能测试一直集中在测量$ digests上.一些例子:

数据绑定在AngularJS中如何工作?(请参见Misko的答案)

如何衡量AngularJS应用的摘要周期的性能?

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

这很好地解释了$ apply和$ digest之间的区别: http://www.sitepoint.com/understanding-angulars-apply-digest/.相关摘录:

$ digest:

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

$ apply:

AngularJS ...将仅考虑在AngularJS的上下文中完成的那些模型更改(即，更改模型的代码包装在$ apply()中). Angular的内置指令已经做到了，这样您所做的任何模型更改都会反映在视图中.但是，如果您在Angular上下文之外更改任何模型，则需要通过手动调用$ apply()来通知Angular更改.这就像告诉Angular您正在更改某些模型，并且应该触发观察程序，以便您的更改正确传播.

As a requirement, I have to analyze the performance benchmark of several AngularJS components such as ng-grid, data-tables in IE8, Chrome & FF against a mock data. I have the mock data in place.

Now when using IE8 Profiler, I am getting time (ms) for several functions. As per AngularJS call structure, should $digest time (Inclusive Time, as per IE8 profiler) reflect the load time of the page, or the sum of $digest & $apply? I am new to AngularJS, so an explanation on these concepts would be nice!

解决方案

Note that calling $apply will trigger $digest on the $rootScope, which means $digesting all child scopes.

The $apply function itself is relatively light (you can inspect it in the angular source). It is the process of evaluating watchers and comparing values (dirty-checking) during a $digest that can get expensive. Because of this, performance testing to date has been focused on measuring the $digests. Some examples:

How does data binding work in AngularJS? (see Misko's answer)

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

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

This is a great explanation of the difference between an $apply and a $digest: http://www.sitepoint.com/understanding-angulars-apply-digest/. Relevant excerpts:

$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.

$apply:

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.

这篇关于如何分析AngularJS组件中的性能基准?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！