google-chrome-devtools - 在 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 自动将用户计时测量结果记录到主线程事件图表中。