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

Posted 2023-03-07

【中文标题】Google Chrome 中常规和性能分析器模式之间的区别

【英文标题】：Difference between regular and performance profiler mode in Google Chrome

【发布时间】：2019-10-10 12:13:05

【问题描述】：

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

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

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

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

我预计会在分析器中看到性能问题，但在我尝试记录时它运行良好。

【参考方案1】：

与问题相关的三种模式：

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

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

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

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

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

【讨论】：

P.S. alph 是一名 DevTools 工程师。

@alph tyvm 获取详细答案，非常简单！

哦，我的... 这个问题时不时地困扰着我，而且从来不知道如何用谷歌搜索它。现在我终于找到了你的答案。我从来没有意识到打开 devtools 的速度有多慢！