衡量网页的性能

Question

我有一个Web应用程序，它使用带有Typescripts的angular 1.5。 Angular将调用web api。 api使用Entity框架。现在我想测量页面的性能，如页面加载，按钮点击等各种事件。

是否有可用的工具可以提供执行控制器操作所花费的时间，实体框架所花费的时间等信息？

我想要一个可以在加载页面时提供聚合信息的工具，或者我点击任何按钮。

即使有工具可以单独提供上述信息，我也很好。

Answer 1

您是否尝试过Chrome DevTools？您应该查看以下链接：the timeline tool和analyze runtime performance。

简而言之：您应该打开开发人员工具，转到配置文件并开始录制，然后执行要测量的操作（例如，单击按钮）并停止录制。您将看到每个方法调用需要多长时间。 Here a how to关于如何进行录音和一些提示。

还有其他选项，例如Firebug。

Answer 2

很少有工具可以分析您的代码，观察程序和摘要周期。您还可以在Chrome中使用时间轴工具。

https://chrome.google.com/webstore/detail/angular-performance/hejbpbhdhhchmmcgmccpnngfedalkmkm?utm_source=chrome-app-launcher-info-dialog

https://augury.angular.io/

Answer 3

角度应用中有几个性能指标：

例如，您可以测量摘要周期时间：

$timeout(() => {
    angular.element(document).injector().invoke(() => {
      let start = performance.now();
      $rootScope.$apply();
      console.log(performance.now() - start);
    });
  });