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

Question

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

问题是 - 我在尝试记录性能配置文件时无法重现该问题 - 该应用程序在那里运行良好。

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

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

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

标签： javascriptangularanimationgoogle-chrome-devtools

Answer 1

与问题相关的三种模式：

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

模式 #2 预计会比 #1 慢，因为 DevTools 会在运行页面中添加大量挂钩以进行调试。

但是，当您运行分析器（模式 #3）时，大多数挂钩会暂时禁用。

这导致模式#1 应该是最快的，#3 有点慢（由于分析），而#2 是最慢的。

在截屏视频中，我可以看到您正在比较#2 和#3。预计#3 会更快。