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

Question

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

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

Answer 1

您可以进行性能记录，以粗略估计监听器执行的时间。一般工作流程是：

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

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