How Do I Measure the Performance of my AngularJS app's digest Cycle?

Question

What is a simple way to measure the duration of the angularjs digest cycle? There exist various methods to analyze the performance of the digest cycle, however each comes wi

Answer 1

Here's a secret. In the chrome dev tools, do a cpu profile run. After you have stopped capturing, at the bottom of the screen is a down triangle next to "Heavy (Bottom Up)". Click the triangle and select "Flame Chart". Once you are in Flame Chart mode, you can zoom and pan to see the digest cycles, how long they take, and exactly what functions are being called. The Flame Chart is so incredibly useful for tracking down page load issues, ng-repeat performance problems, digest cycle problems! I really don't know how I was able to debug and profile before the Flame Chart. Here is an example:

Answer 2

Here is a new tool I found that helps out in digest profiling: Digest-HUD

Answer 3

You could also use angular-performance

This extension provides realtime monitoring charts of the number of watchers, digest timing and digest rate. You also get the digest timing distribution so that you can make out exceptionally long digest timing from more recursive paterns and all realtime data are linked to events so that you can determine which actions changed the application performances. Finally, you can time services method and count their execution to determine the ones that have the more impact on the running time of your app.

Disclamer: I am the author of the extension

Answer 4

One handy tool for keeping an eye on the digest cycle can be found via the excellent ng-stats tool by @kentcdodds. It creates a little visual element like so, and can even be implemented via bookmarklet. It can even be used inside of iFrames like jsfiddle.

Little utility to show stats about your page's angular digest/watches. This library currently has a simple script to produce a chart (see below). It also creates a module called angularStats which has a directive called angular-stats which can be used to put angular stats on a specific place on the page that you specify.

Found at https://github.com/kentcdodds/ng-stats

Answer 5

the tools above describe already gave you the idea of measuring the performance of digest loop Most importants points for increasing the performance of digest cycle are

• Monitor closely scroll events to hide all invisible elements and
  greatly reduce the number of watchers.

• Have manageable $digest cycles for all other events.

Answer 6

You can use UX Profiler

• User Transaction view, i.e. CLICK and all the activity caused by it (other events, XHRs, Timeouts) grouped together.
• Time measurements (as User feels it) of the entire User Transaction and/or its parts.
• Combined asynchronous stack trace.
• Focused Profiler - profile just the problematic event.
• Angular 1.x integration.