Search code examples
javascriptangularperformancegoogle-chromeprofiler

Javascript Chrome profiler granularity - Go deeper

I'm currently debugging an Angular (JS) based app. I have some speed issue on runtime (client side) and want to analyze why.

I use the Devtool profiler from Chrome. I can see that some Events (i.e. keypress, blur) took a lot of time (see screenshot below).

enter image description here

Now I would like to go deeper and know which source code contains these event listeners and cause my application to slow down like this.

For information, the app is very slow when I write text in input, and when I focus/blur from my input; I know that some watchers could cause the slow down, but I'm not sure.

Hope deeper profiler analysis could help me !

--- Edit 25 feb 2020 ---

I think my problem is linked to digest cycle (apply/digest, etc). I found this plugin : digest-hud. After several tries, it seems that a binding (which is used in a lot of components) called "source" is taking all digest resource :

enter image description here

Solution

  • Digest-hud was really helpful. I cannot find a way to know exactly how to find ha function initial calls on callstack. Like Kresimir Pendic said, probably a map issue.

    But I found a lot of binding/watcher with source and one of them was called every single event of focus/blur/tipping. So I removed it, find an other way to signal changes within input and it works.

    So don't hesitate to check with Digest-hud (disclaimer, I'm not releated in any way with Digest-hud developer(s)) if you have some performance issue with your AngularJS app, it'll give you some hints to solve the problem.