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

Question

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

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

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

Answer 1

这是一个秘密.在chrome dev工具中,执行cpu配置文件.停止捕获后,屏幕底部是"Heavy(Bottom Up)"旁边的三角形.单击三角形并选择"火焰图".一旦处于火焰图表模式,您可以缩放和平移以查看摘要周期,它们需要多长时间以及确切调用的函数.火焰图对于跟踪页面加载问题,重复性能问题,消化周期问题非常有用!我真的不知道我是如何在火焰图表之前调试和配置文件的.这是一个例子:

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

您也可以使用角度性能

此扩展提供了观察者数量,摘要时间和摘要率的实时监控图表.您还可以获得摘要时序分布,以便您可以从更多递归模式中获得特别长的摘要时序,并且所有实时数据都链接到事件,以便您可以确定哪些操作更改了应用程序性能.最后,您可以计时服务方法并计算其执行次数,以确定对您的应用程序运行时间产生更大影响的方法.

免责声明:我是扩展的作者

Answer 5

保持眼睛上的消化周期的一个方便的工具，可以通过优秀的发现NG-统计工具的@kentcdodds。它会像这样创建一个视觉元素，甚至可以通过书签实现。它甚至可以在jsfiddle之类的iFrame中使用。

用于显示有关页面角度摘要/观看次数的统计信息的小工具。该库当前有一个简单的脚本可以生成图表（请参见下文）。它还会创建一个名为的模块angularStats，该模块具有名为的指令，该指令angular-stats 可用于将角度统计信息放置在您指定的页面上的特定位置。

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