title: Angular JS Scaling & Performance
body: <p>We are pounding our heads against performance issues with an Angular app we are building for a bank.</p>
  
  <p>Unfortunately, it is a breach of contract to show snippets of the code. Regardless, I can describe some of the main issues going on, and I am hoping that best practice can be recommended.</p>
  
  <p>Applications Structure:</p>
  
  <ul>
  <li>Essentially, a giant multi-form page.</li>
  <li>Each form is its own partial, with nested controllers and partials about 3 levels deep.</li>
  <li>The same forms are ng-repeated over a collection of json objects.</li>
  <li>Each form is bound to the object / model that it is repeated over.</li>
  <li>We are supposed to support anywhere from 1-200 forms on the page.</li>
  </ul>
  
  <p>If you take a look at the timeline. We are spending a great deal of time in the jQuery parse html method, jQuery recalculate stye method, the GC Event (Garbage Collection). I imagine minimizing these should speed things up a bit. They are all a part of the Angular lifecycle, but there may be better ways to avoid them. Here are some screenshots of the profiler:</p>
  
  <p><img src="https://i1218.photobucket.com/albums/dd408/trevorewen/MOE%20Profiling/recalc_style.png" alt="Recalculate Style">
  <img src="https://i1218.photobucket.com/albums/dd408/trevorewen/MOE%20Profiling/gc_event.png" alt="GC Event"></p>
  
  <p>Ultimately, the app is sluggish as the number of repeated forms goes above 5. Each form is relatively unrelated to the others. We have tried not to watch any shared properties between the forms.</p>