pkaminski / digest-hud

Digest performance analysis HUD for AngularJS.
MIT License
111 stars 20 forks source link

explanation on how to use it? #10

Open goldylucks opened 9 years ago

goldylucks commented 9 years ago

I've setup everything and it works fine.

What do I do from here?

Maybe do a quick screen cap vid showing how you improve the performance of a n app?

I'll gladly help / do the vid myself if you give me some pointers

pkaminski commented 9 years ago

Hey Adam, a typical workflow goes like this:

  1. Find a scenario for your app where performance is unacceptably low.
  2. Run through the scenario and look at the top items in the digest HUD.
  3. Apply various digest optimization techniques to reduce the runtime of those items.
  4. Repeat until performance is satisfactory.

I won't get into how to actually optimize the digest -- the techniques are very context-dependent and there's plenty of good articles on the web. Approaches include optimizing code (digest-hud tells you if it's the watcher or the callback that's slow), replacing multiple watchers with a single one, replacing watchers with a custom directive, etc.

Another way in which digest-hud can be helpful is if you notice the "digest dot" blinking madly, then something is spamming the digest cycle. Even if this doesn't have an impact on performance right now, you really want to track it down and fix it, since once the digest becomes non-trivial it'll pretty much lock up the browser. Again, how to actually do this is more of an art.

If you found any of the above useful or have your own tips to add, I'm happy to take PRs against the README. Cheers!