Javascript Chrome 分析器粒度 - 更深入

Question

我目前正在調試基於 Angular (JS) 的應用程序。 我在運行時（客戶端）有一些速度問題，想分析原因。

我使用 Chrome 的Devtool 分析器。 我可以看到一些事件（即按鍵、模糊）花費了很多時間（見下面的截圖）。

現在我想更深入地了解哪些源代碼包含這些事件偵聽器並導致我的應用程序像這樣變慢。

有關信息，當我在輸入中寫入文本以及從輸入中聚焦/模糊時，該應用程序非常慢； 我知道一些觀察者可能會導致速度變慢，但我不確定。

希望更深入的分析器分析可以幫助我！

--- 2020 年 2 月 25 日編輯 ---

我認為我的問題與消化周期（應用/消化等）有關。 我找到了這個插件： digest-hud 。 經過多次嘗試，似乎一個名為“source”的綁定（在很多組件中使用）正在獲取所有摘要資源：

Answer 1

Digest-hud 真的很有幫助。 我找不到確切知道如何在調用堆棧上找到ha函數初始調用的方法。 就像 Kresimir Pendic 說的，可能是地圖問題。

但是我發現了很多帶有source的綁定/觀察者，其中一個被稱為每個焦點/模糊/傾斜事件。 所以我刪除了它，找到了另一種方式來表示輸入中的變化並且它起作用了。

因此，如果您的 AngularJS 應用程序有一些性能問題，請不要猶豫與 Digest-hud（免責聲明，我與 Digest-hud 開發人員沒有任何關系），它會給您一些方法解決這個問題。