Improving Angular web app performance example.

Improving Angular web app performance example.

Once your Angular application has the features you need, the next step is usually focused on improving its performance. Initial load time, responsiveness to user’s commands – the application has to execute quickly in order to be useful. There are general guides to improve an angular application’s speed by order of 2 magnitudes. For example Scalyr blog post suggests the following:

  • Cache DOM elements
  • Fewer watchers
  • Defer element creation
  • Skip watchers for hidden elements

I find these suggestions valid, but too difficult to implement right away. Instead I suggest the following steps to optimize Angular web app’s performance.

  • Profile individual actions
    • Optimize obvious JavaScript (non-Angular code) bottlenecks
  • Measure and optimize the idle digest cycle
    • Simplify watched expressions by removing filters
    • Remove unnecessary watchers by replacing two- with one-way data binding

This step by step example shows practical scripts to run when you need to speed up an Angular application. The scripts will be run repeatedly to diagnose bottlenecks, so it is helpful to add them to Chrome DevTools as code snippets. I described how to use code snippets in this blog post. These scripts can be copied frombahmutov/code-snippets.

The example uses Angular 1.2, but the techniques for profiling the application and finding bottlenecks should be applicable to future versions too.

Tagged: , ,

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s