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

EN

这里有个秘密。在chrome dev工具中，运行一个cpu配置文件。停止捕获后，屏幕底部会出现一个向下的三角形，旁边是"Heavy (Bottom Up)“。单击三角形并选择"Flame Chart“。进入火焰图表模式后，您可以缩放和平移以查看摘要周期、它们所用的时间以及正在调用的确切函数。Flame Chart对于跟踪页面加载问题、ng-repeat性能问题、摘要周期问题非常有用！我真的不知道我是如何在火焰图表之前进行调试和分析的。下面是一个示例：

​

​

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

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

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

结果将给出摘要周期的持续时间，以毫秒为单位。数字越小越好。

注意：

Domi在注释中指出:如果您使用ng-app指令进行初始化，angular.element(document)将不会产生太多结果。在这种情况下，请改为获取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

​

​