CODEWITHSUNDEEP
javascriptangularperformancemonitoring
pop
pop

Reputation: 3714

Monitoring and debugging performance of Angular components

One of my Angular (5.1.0) components slows down the whole app considerably: reacting to click event takes 30ms in every other view of the app and around 350ms in this one problematic view. And although the desktop performance is almost indistinguishable between the "problematic" and "normal" views, the performance difference on a mobile device is obvious and the performance penalty is just staggering (in the example above, the click event would take more like a 1500ms on a smartphone).

There are basically two new components which have been added recently. One of them holds the view, the other one renders some data (and is used twice on the page). I would put my bet on the latter one, but I do not know where to start. Chrome DevTools and Safari Developer Tools could for now give me the meaningful event times, but either I do not know how to dig deeper or I need different tools or methodology altogether to pinpoint what exactly causes the lag. Any ideas?

Upvotes: 0

Views: 2552

Answers (1)

Ryan
Ryan

Reputation: 21

For the "monitoring" aspect of your question, you can try Bucky an opensource tool to monitor webapp performance on browser side.

There is also a post about how to monitor AngularJS with Statsd here.

If you're really care about measuring user experiences, you can take a look at using percentiles, some information can be found here and here.

Upvotes: 2

Related Questions