DZone
Performance Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Performance Zone > Methods for Optimizing AngularJS

Methods for Optimizing AngularJS

Benjamin Ball user avatar by
Benjamin Ball
·
Jan. 27, 14 · Performance Zone · Interview
Like (0)
Save
Tweet
10.85K Views

Join the DZone community and get the full member experience.

Join For Free

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 . 

AngularJS

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Hide Your API Keys With an API Proxy Server
  • The Ultimate Software Engineering Job Search Guide
  • Why "Polyglot Programming" or "Do It Yourself Programming Languages" or "Language Oriented Programming" sucks?
  • Bad or Good? Behavior Driven Development within Scrum.

Comments

Performance Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo