Instead of Request It Again Https www alexkras com 11 tips to improve angularjs performance

I am new to Athwart (even though I am not new to the web evolution), then please accept everything that I am nigh to say with a grain of salt. That being said, I watched a lot of talks and read a lot of manufactures relevant to Angular performance, and this postal service is the summary of my findings.

Table of Contents

• 1. Minimize/Avoid Watchers
• 2. Avoid ng-repeat. If you have to use ng-repeat use infinite scrolling or pagination
• 3. Use Bind in one case when possible
• iv. Employ $watchCollection instead of $watch (with a 3rd parameter)
• 5. Avoid repeated filters and enshroud data whenever possible
• 6. Debounce ng-model
• 7. Utilise ng-if instead of ng-show (but confirm that ng-if is really better for your utilize example)
• eight. Use panel.time to benchmark your functions
• 9. Utilise native JavaScript or Lodash for slow functions
• ten. Apply Batarang to benchmark your watchers
• eleven. Use Chrome Timeline and Profiler to identify operation bottlenecks

ane. Minimize/Avoid Watchers

Usually, if your Athwart app is slow, information technology ways that you either have likewise many watcher, or those watchers are working harder and then they should.

Athwart uses muddy checking to go along track of all the changes in app. This ways it will have to go through every watcher to cheque if they need to be updated (call the digest cycle). If one of the watcher is relied upon by another watcher, Angular would have to re-run the digest cycle over again, to brand certain that all of the changes has propagated. Information technology volition continue to do so, until all of the watchers accept been updated and app has stabilized.

Fifty-fifty though running JavaScript in mod browsers is really fast, in Angular it is fairly easy to add and then many watchers that you app will slow downwards to a crawl.

Go along in listen the following when implementing or refactoring an Athwart app.
http://world wide web.codelord.net/2014/06/17/angular-performance-101-slides/

1. Watches are set on:
   • $scope.$watch
   • {{ }} type bindings
   • Nearly directives (i.east. ng-show)
   • Scope variables scope: { bar: '='}
   • Filters {{ value | myFilter }}
   • ng-repeat
2. Watchers (digest cycle) run on
   • User action (ng-click etc). Near built in directives will call $scope.apply upon completion which triggers the assimilate cycle.
   • ng-change
   • ng-model
   • $http events (then all ajax calls)
   • $q promises resolved
   • $timeout
   • $interval
   • Transmission call to $scope.utilize and $scope.digest

This was the biggest win for our app. I am not going to go into too much details, just I institute the article bellow to be extremely helpful.

http://www.williambrownstreet.net/blog/2013/07/angularjs-my-solution-to-the-ng-repeat-performance-problem/

In addition to space whorl, brand sure to employ track past when possible. https://docs.angularjs.org/api/ng/directive/ngRepeat#tracking-and-duplicates

For case a unique step id, is a proficient value to rail by when doing an ng-repeat.

<li ng-repeat="Task in Tasks rails by Task.Id></li>

3. Employ Demark once when possible

Angular 1.3 added :: notation to allow one time binding. In summary, Angular will wait for a value to stabilize afterward information technology's first series of assimilate cycles, and will use that value to render the DOM element. After that, Angular will remove the watcher forgetting near that binding.
https://code.angularjs.org/i.3.15/docs/guide/expression#i-fourth dimension-binding

Come across the Pen AngularJS – Demark In one case Example past Alex (@akras14) on CodePen.

If you lot are on pre one.three version of Angular you tin utilise this library to reach similar results:
https://github.com/Pasvaz/bindonce

4. Utilise $watchCollection instead of $watch (with a 3rd parameter)

$watch with only two parameters, is fast. Withal, Athwart supports a 3rd parameter to this office, that can await like this: $lookout('value', office(){}, true). The third parameter, tells Angular to perform deep checking, meaning to check every holding of the object, which could be very expensive.

To address this operation result, angular added $watchCollection('value', function(){}). $watchColleciton acts almost like $scout with a 3rd parameter, except it but checks the first layer of object's properties, thus greatly improving the operation.

Official md:
https://code.angularjs.org/1.3.15/docs/api/ng/type/$rootScope.Scope#$watchCollection

Helpful web log mail service:
http://www.bennadel.com/blog/2566-scope-watch-vs-watchcollection-in-angularjs.htm

5. Avoid repeated filters and cache data whenever possible

One fourth dimension binding does not seem to play well with filters. At that place seems to be piece of work arounds to make it piece of work, but I recollect it's cleaner and more intuitive to merely assign the needed value to a variable (or set information technology as a property on an object, if you lot are dealing with a lot of variables).

For example, instead of:

{{'DESCRIPTION' | translate }}

You lot tin can do:
– In JavaScript $scope.description: $translate.instant('DESCRIPTION')
– In HTML {{::description}}

Or instead of: {{step.time_modified | timeFormatFilter}}

• In JavaScript

            
                              var                timeFormatFilter = $filter('timeFormatFilter'); step.time_modified = timeFormatFilter(step.time_modified);                          
                          Code language:              PHP              (              php              )                      

• In HTML {{::Path.time_modified}}

6. Debounce ng-model

If yous know at that place is going to exist a lot of changes coming from an ng-model, you tin de-bounce the input.

For case if you take a search input like Google, y'all can de-bounce it by setting the post-obit ng-model choice: ng-model-options="{ debounce: 250 }.

This will ensure that the digest cycle due to the changes in this input model volition get triggered no more than then in one case per 250ms .

https://docs.angularjs.org/api/ng/directive/ngModelOptions

7. Use ng-if instead of ng-show (simply ostend that ng-if is really meliorate for your utilize case)

ng-show will return an element, and use display:none to hide information technology,
ng-if volition actually removes the element from DOM, and will re-create it, if information technology's needed.

You may need ng-prove for an elements that toggles on an off oft, just for 95% of the time, ng-if is a meliorate way to go.

8. Use console.fourth dimension to benchmark your functions

console.time is a great API, and I found it peculiarly helpful when debugging issues with Athwart performance. I placed a number of those calls through out my code, to assistance me confirm that my re-factoring was in fact improving the operation.

https://developer.mozilla.org/en-United states of america/docs/Web/API/Console/fourth dimension

The API looks as such:

            
                              panel.time("TimerName");                //Some code                panel.timeEnd("TimerName");                          
                          Code language:              JavaScript              (              javascript              )                      

And here is a unproblematic example:

            
                              console.time("TimerName"); setTimeout(                  office(){                console.timeEnd("TimerName"); },                100);                //In console $: TimerName: 100.324ms                          
                          Code linguistic communication:              JavaScript              (              javascript              )                      

Note: If panel.fourth dimension is not precise plenty for your needs, y'all can become a more authentic reading using performance.now(). You will accept to do your own math, if you choose to take this path.

https://docs.google.com/presentation/…

            
              totalTime =                0; count =                0;                var                someFunction =                                  role()                {                var                thisRunStartTime = operation.at present();   count++;                // some code                // some more than code                totalTime += performance.now() - thisRunStartTime; };                console.log("Boilerplate time: "                + totalTime/count);                          
                          Code language:              JavaScript              (              javascript              )                      

9. Utilise native JavaScript or Lodash for slow functions

Our app was already using lodash, so at that place was no overhead for me to apply it in my optimization. If lodash was not include, I would probably attempt to re-write everything in native JavaScript.

In my tests I got a significant performance heave by only 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).

Maintainer of Lodash John-David Dalton is also a co-creator of https://jsperf.com/, and he is all near the functioning. So I trust him and his library when it comes to speed.

10. Use Batarang to criterion your watchers

Batarang is a nifty tool from the Athwart team, and information technology was very helpful in my debugging efforts. Information technology has a lot of useful features, simply the i that was the almost relevant to this employ-case is the performance tab.

Make sure to go the stable version, which seems to piece of work for the bulk of users.
https://chrome.google.com/webstore/item/angularjs-batarang-stable/niopocochgahfkiccpjmmpchncjoapek

Picket this video to get more insight into the Batarang.

11. Use Chrome Timeline and Profiler to identify performance bottlenecks

I like to recollect of myself as a Chrome Dev Tools power user. Merely it'southward not often that I get a to use the Timeline and Profiler views. In this project, both were extremely helpful.

Pro Tip: If you apply console.fourth dimension API (meet tip #eight), the time catamenia will get highlighted on your timeline snapshot. And then yous can examine the exact time menstruum that you care virtually the most.

https://developer.chrome.com/devtools/docs/timeline#user-produced-timeline-events

The timeline view, and the magic 60fps line is crucial. When I started on our project, the app was rendering full steam for fifteen seconds or more than, becoming almost completely unresponsive to the user.

After performance optimization, the app now fully renders in less then ii seconds (note that the time scale is different), allowing users to freely interact with the user interface subsequently a relatively brusk delay.

It is clear from looking at the image that the app could exist further optimized. But even as is, I am very happy with the improvements to the user experience.

To get more experience with Timeline view, check out these web audits past Paul Irish gaelic:

https://docs.google.com/document/d/1K-mKOqiUiSjgZTEscBLjtjd6E67oiK8H2ztOiq5tigk/pub

Finally, I wanted to mentioned the Profiling tab in Chrome Dev tools, and the JavaScript CPU profiler in detail. It has 3 views:

one. Nautical chart view is like to the timeline, but it makes it a bit easier to jump to the source code of the part of interest.

2. Heavy (Bottom upward view)
This view identifies heavy user functions, and shows you the reverse phone call stack to assist pinpoint origination of the function. Note how $digest comes before the $utilize, indicating the reverse order.

3. Tree (Top Down)
Exposes the functions from which the heavy consumption originated, and then yous can drill downward to detect the offending function.

Also note the yellowish triangle with a "!", if yous even so over it, it volition place a potential optimization trouble.

https://developer.chrome.com/devtools/docs/cpu-profiling

P.S. If you constitute these tips helpful, please consider reviewing this post on Amazon

thompsonequied.blogspot.com

Source: https://techtldr.com/11-tips-to-improve-angularjs-performance/

Share this post