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

Question

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

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

Answer 1

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

1. 开始录制。
2. 单击按钮（或其他）以触发侦听器。
3. 停止录制。请参阅Get Started With Analyzing Runtime Performance以熟悉录制用户界面。
4. 在Main thread activity chart。
中找到听众
5. 单击侦听器以在“摘要”选项卡中查看其详细信息（＆＃34;主线程活动图表中的部分＆＃34;还说明“摘要”选项卡）。从这里你可以看到长时间的监听器如何执行。

您还可以使用User Timing API来检测您的应用。您可以将测量结果记录到控制台，也可以在性能记录中查看它们。 DevTools会自动将用户计时测量记录到主线程活动图表中。