Methods for Optimizing AngularJS

Recently, developers at Scalyr have been talking about using optimized AngularJS  as a single-page application architecture solution for Scalyr Logs, their log monitoring tool. They identified AngularJS as a potential means to improve their log message's framework. An early implementation of AngularJS resulted in a new page view time of 1.2 seconds. This rather chunky amount of response time was caused by potentially thousands of tokens being generated on each new page view. 

The developers reported they were able to decrease the 1.2 seconds next page progression time to 35 milliseconds by creating four optimizations to the application they felt best reflected the philosophy of AngularJS and fetched the view times they were looking for. They also included a section of code that reflected the custom directives they created.

Their four primary optimizations included: 

1. Caching DOM elements using a variant of the ng-repeat directive.
2. Aggregating watchers to be hidden when not in use.
3. Deferring creation of per-word elements until mouse interaction.
4. Preventing watcher execution when parent element is hidden.

To evaluate the results of their custom directives, they used code to measure the time between a mouse click and AngularJS's cycle finishing. They then measured the performance of the "Next Page" button while viewing a Tomcat access log in Chrome. Their results were impressive. The custom directives allowed them to drop the response time from 1190 milliseconds to 35 milliseconds with cached data, and 1300 milliseconds to 201 milliseconds with data retrieved from their server. 

They report that while there were easier and less time consuming ways to generate HTML for the log view, this implementation best matches the goals of AngularJS. If you want to view the source code for their custom work, visit their Github page .