Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Methods for Optimizing AngularJS

DZone's Guide to

Methods for Optimizing AngularJS

· Performance Zone
Free Resource

Discover 50 of the latest mobile performance statistics with the Ultimate Guide to Digital Experience Monitoring, brought to you in partnership with Catchpoint.

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 . 

Is your APM strategy broken? This ebook explores the latest in Gartner research to help you learn how to close the end-user experience gap in APM, brought to you in partnership with Catchpoint.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}