如何测量AngularJS应用的摘要周期的性能？

测量angularjs摘要循环持续时间的简单方法是什么？有多种方法可以分析摘要循环的性能，但是每种方法都有其自己的pitfal：

• Chrome事件探查器：过多的细节，无法以一种易于发现的方式破坏摘要周期
• Batarang（AngularJS浏览器插件）：开销太大，刷新速度慢，在大型应用程序中爆炸。

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

这是一个秘密。在chrome开发工具中，运行cpu配置文件。停止捕获后，在屏幕底部的“重（自下而上）”旁边是一个向下的三角形。单击三角形，然后选择“火焰图”。进入“火焰图”模式后，您可以缩放和平移以查看摘要循环，花费多长时间以及确切地调用了哪些功能。火焰图表对于跟踪页面加载问题，ng-repeat性能问题，摘要循环问题非常有用。我真的不知道如何在火焰图表之前进行调试和配置。这是一个例子：

以下答案将告诉您$ digest循环的空闲性能，即，当您的watch表达式均未更改时的摘要性能。如果即使视图未更改，您的应用程序似乎也很慢，这将很有用。对于更复杂的情况，请参见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); 
})

这是我发现的有助于概要分析的新工具：Digest-HUD

您还可以使用角度性能

该扩展提供了观察者数量，摘要时间和摘要速率的实时监视图。您还可以获得摘要定时分布，以便可以从更多的递归模式中找出异常长的摘要定时，并且所有实时数据都与事件相关联，以便您可以确定哪些操作更改了应用程序性能。最后，您可以对服务方法进行计时并计算其执行次数，以确定对应用程序运行时间影响更大的方法。

Disclamer：我是扩展名的作者

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

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

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

您可以使用UX Profiler

• 用户事务视图，即CLICK和由它引起的所有活动（其他事件，XHR，超时）组合在一起。
• 整个用户事务和/或其部分的时间度量（如用户感觉）。
• 组合的异步堆栈跟踪。
• 聚焦探查器-仅探查有问题的事件。
• Angular 1.x集成。

对于严格模式，运行摘要循环，在chrome的f12控制台中运行

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

上面描述的工具已经给您提供了测量摘要循环性能的想法，对于提高摘要循环性能的最重要的要点是

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

• 对于所有其他事件，具有可管理的$ digest循环。