Google Chrome中常规和性能分析器模式之间的区别

Question

我正在尝试在Angular 7应用程序中调试JS（propellerjs）动画，该动画运行在requestAnimationFrame上，但运行速度非常慢。

问题是-在尝试记录性能配置文件时，我无法重现该问题-该应用在其中运行正常。

常规模式和性能配置文件记录模式之间有什么区别？我试图关闭所有扩展名并重新启动浏览器，但这没有帮助。

您会注意到，在我尝试使用事件探查器记录时，轮子在常规模式下旋转非常慢，并且旋转得又快又好。

我希望在探查器中看到性能问题，但是当我尝试记录时，它工作得很好。

Answer 1

与问题相关的三种模式：

1. DevTools已关闭
2. DevTools是打开的，不是性能记录
3. DevTools已打开，性能记录正在运行。

由于DevTools在运行页面中添加了大量用于调试目的的钩子，因此＃2模式预计会比＃1慢。

但是，当您运行事件探查器（模式3）时，大多数挂钩将被暂时禁用。

这导致模式＃1应该是最快的，＃3会慢一些（由于分析），而＃2则是最慢的。

在截屏视频中，我可以看到您正在比较＃2与＃3。可以预料＃3会更快。