如何衡量AngularJS应用程序的摘要周期的性能？

Question

测量angularjs摘要周期持续时间的简单方法是什么？存在各种方法来分析消化循环的性能，但是每种方法都有自己的pitfals：

• Chrome Profiler：太多细节，不会以易于查找的方式分解摘要周期
• Batarang（AngularJS浏览器插件）：开销太大，刷新速度慢，大型应用程序爆炸。

......一定有更好的方法吗？！1？

Answer 1

这是一个秘密。在chrome dev工具中，执行cpu配置文件。停止捕获后，屏幕底部是一个向下的三角形，旁边是＃34;重（自下而上）＆＃34;。单击三角形并选择＆＃34; Flame Chart＆＃34;。一旦处于火焰图表模式，您可以缩放和平移以查看摘要周期，它们需要多长时间以及确切调用的函数。火焰图对于跟踪页面加载问题，重复性能问题，消化周期问题非常有用！我真的不知道如何在火焰图表之前调试和配置文件。这是一个例子：

Answer 2

以下答案将告诉您$ digest循环的空闲性能，即，当您的任何监视表达式都没有更改时，摘要的性能。如果您的应用程序看起来很迟钝，即使视图没有改变，这也很有用。对于更复杂的情况，请参阅aet的答案。

---

在控制台中输入以下内容：

angular.element(document).injector().invoke(function($rootScope) { 
  var a = performance.now(); 
  $rootScope.$apply(); 
  console.log(performance.now()-a); 
})

结果将为您提供摘要周期的持续时间（以毫秒为单位）。数字越小越好。

---

注：

  

Domi在评论中指出：   如果使用angular.element(document)指令进行初始化，ng-app将不会产生太多影响。在这种情况下，请改为使用ng-app元素。例如。通过angular.element('#ng-app')

您也可以尝试：

angular.element(document.querySelector('[ng-app]')).injector().invoke(function($rootScope) { 
  var a = performance.now(); 
  $rootScope.$apply(); 
  console.log(performance.now()-a); 
})

Answer 3

以下是我发现的一个新工具，它可以帮助进行摘要分析：Digest-HUD

Answer 4

您也可以使用angular-performance

  

此扩展提供了实时监控图表的数量   观察者，消化时间和消化率。你也得到了摘要   时间分布，以便您可以进行特别长的摘要   来自更多递归模式的时间和所有实时数据都链接到   事件，以便您可以确定哪些操作更改了应用程序   表演。最后，你可以计时服务方法并统计它们   执行以确定对其产生更大影响的那些   你应用的运行时间。

Disclamer：我是扩展程序的作者

Answer 5

可以通过优秀的ng-stats tool @kentcdodds找到一个用于关注摘要周期的便捷工具。它创建了一个像这样的小视觉元素，甚至可以通过bookmarklet实现。它甚至可以在像jsfiddle这样的iFrame中使用。

  

显示有关您网页的角度摘要/观看数据的实用程序。这个库目前有一个简单的脚本   制作图表（见下文）。它还创建了一个名为angularStats的模块，该模块具有一个名为angular-stats的指令   可用于将角度统计信息放在您指定的页面上的特定位置。

找到https://github.com/kentcdodds/ng-stats

Answer 6

您可以使用UX Profiler

• 用户交易视图，即CLICK及其引起的所有活动（其他事件，XHR，超时）组合在一起。
• 整个用户交易和/或其部分的时间测量（用户感觉）。
• 组合异步堆栈跟踪。
• 聚焦Profiler - 简介有问题的事件。
• Angular 1.x整合。

Answer 7

对于严格模式，运行digest cucle，在chrome中的f12控制台中运行

angular.element(document).injector().invoke(['$rootScope',function($rootScope) { var a = performance.now(); $rootScope.$apply(); return performance.now()-a; }])

Answer 8

上面描述的工具已经为您提供了测量摘要循环性能的想法  提高消化循环性能的最重要的一点是

• 密切监视滚动事件以隐藏所有不可见元素和
     大大减少了观察者的数量。

• 为所有其他活动提供可管理的$摘要周期。