Being a Javascript/Angular developer, I like to watch a lot of talks and read a lot of relevant articles are to Angular performance, so I am sharing the summary of my findings which I think going to help in some ways. Here are the best ways to optimize an angular application.

1. Use watchers/data bindings as less as possible

Any time we introduce more and more data-bindings, we create more $$watchers and $scopes, which prolongs the digest cycle. Too many $$watchers can cause lag, so limit their use as much as possible. One needs to keep watch the digest cycle. We can assume each digest cycle like as a loop that checks for changes to variables being monitored. The shorter the digest cycle, faster the application will run.

2. Use of native JavaScript or Lodash

Lodash improves your application performance by simply re-writing some of the basic logic instead of relying on inbuilt AngularJS methods.  I got a significant performance boost by simply re-writing some of the basic logic with lodash, instead of relying on built-in Angular methods (which have to account for much more generic use cases).

3. Use ng-if instead of ng-show/ng-hide

ng-show directive toggle the CSS display property on a particular element while ng-if directive actually removes the element from DOM and re-create it if needed. Further, ng-switch directive is an alternative to ng-if for same performance benefits.

4. Use Chrome DevTools like CPU Profiler and Timeline

A general browser related technique is to use both the browser devTools Profiler and the Timeline tool. It can help you find performance bottlenecks to guide your optimization efforts.

5. Minimise the DOM access

Accessing the DOM very frequently could get expensive, so keep your DOM trees small. Don’t modify the DOM if you can help it, and don’t set any inline styles to avoid JavaScript reflow.

6. Proper Bundling and Minification

Bundling and minifying a website’s scripts and stylesheets reduces page load time and asset size. Proper Bundling and Minification of code at the time of deployment make use of several task runners available like gulp or grunt for minification and bundling.

7. Use $watchCollection instead of $watch

$watch with only 2 parameters, is faster. However, Angular also supports a 3rd parameter to this function, that can look like this: $watch(‘value’, function( ){ }, true). The third parameter, tells Angular to perform deep checking, meaning to check every property of the object, which could be very time taking.