Javascript Chrome 分析器粒度 - 更深入

Javascript Chrome profiler granularity - Go deeper

我目前正在调试一个基于 Angular (JS) 的应用程序。我在运行时(客户端)遇到了一些速度问题,想分析原因。

我使用 Chrome 的 Devtool 探查器。我可以看到一些 Events(即按键、模糊)花了很多时间(见下面的截图)。

现在我想更深入并知道哪些源代码包含这些事件侦听器并导致我的应用程序像这样变慢.

请注意,当我在输入中写入文本时,以及当我 focus/blur 从我的输入中输入时,该应用程序非常慢;我知道一些观察者可能会导致速度变慢,但我不确定。

希望更深入的分析器分析可以帮助我!

--- 编辑 2020 年 2 月 25 日 ---

我认为我的问题与摘要循环有关(apply/digest,等等)。 我找到了这个插件:digest-hud。经过几次尝试,似乎一个名为 "source" 的绑定(在很多组件中使用)正在占用所有摘要资源:

Digest-hud 真的很有帮助。我无法找到一种方法来确切地知道如何在调用堆栈上找到 ha 函数初始调用。正如 Kresimir Pendic 所说,可能是地图问题。

但我发现很多 binding/watcher 都带有 source,其中一个被称为 focus/blur/tipping 的每个事件。所以我删除了它,找到了另一种方式来表示输入中的变化并且它起作用了。

因此,如果您的 AngularJS 应用程序存在性能问题,请不要犹豫,与 Digest-hud 联系(免责声明,我与 Digest-hud 开发人员没有任何关系) , 它会给你一些解决问题的提示。