监视DevTools中单击事件处理程序的执行时间

时间:2018-01-02 21:26:13

标签: google-chrome-devtools profiler

如何使用Chrome DevTools JavaScript Profiler测量事件处理程序(例如点击)完成执行所需的时间?

我正在尝试比较使用Angular提供的OnPush更改检测策略之前和之后的事件处理程序的执行时间。

1 个答案:

答案 0 :(得分:1)

您可以进行演奏录制,粗略估计听众执行的时间。一般工作流程是:

  1. 开始录制。
  2. 单击按钮(或其他)以触发侦听器。
  3. 停止录制。请参阅Get Started With Analyzing Runtime Performance以熟悉录制用户界面。
  4. Main thread activity chart
  5. 中找到听众
  6. 单击侦听器以在“摘要”选项卡中查看其详细信息("主线程活动图表中的部分"还说明“摘要”选项卡)。从这里你可以看到长时间的监听器如何执行。
  7. 您还可以使用User Timing API来检测您的应用。您可以将测量结果记录到控制台,也可以在性能记录中查看它们。 DevTools会自动将用户计时测量记录到主线程活动图表中。