在 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. 单击侦听器可在“摘要”选项卡中查看其详细信息（"Main thread activity chart" 中的部分还介绍了“摘要”选项卡）。从这里您可以看到执行监听器所花的时间。

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