Performance Improve in Angular js

Performance Improve in Angular js
Hi friends, This is my first technical blog.As a developer everyday I come across so many blog-post. Simultaneously it is my responsibility to share my knowledge.When user visited to our website their expectation is on the page loading speed.There are some tips by which we can improve our website performance.  

1.Compress your files with GZip.

GZip can reduce a JavaScript file considerably, saving bandwidth, and accelerate the response time. JavaScript files can be very large, and without compression, it can bog down any website. Smaller files provide a faster and more satisfying web experience.  

2.Use require js or oclazyload for on demand loading.

When we start developing an application, we put all the css and js files in theindex.htmlpage and load the application.This is an easy and good way to start with. But our application may not stay small for long. This will grow as time passes.Copying all the files in theindex.htmlpage will take more time for landing page itself. So when the user comes to our page, she/he may get tired of waiting and may leave without even seeing our landing page.When your angular single page application is becoming to big, performance can become a huge problem.To avoid loading of all controllers, services and modules , you can choose for a framework like ocLazyLoad to load all this stuff lazily and give performance a boost.If you have large modular application, there is a chance that some percentage of your users won’t visit all modules, in this case it’s better to split your single js file into some chunks, and lazy load it when needed.  

3.Use HTML5 cache manifest to improve performance.

Cached resources are local, and therefore load faster.Reduced server load.The browser only downloads resources that have changed from the server. refer-

4.Minimize requests for HTTP.

Minimize HTTP requests to render pages by combining external files and including JavaScript directly within XHTML pages. Each time a unique HTTP takes a trip to a server, the result is a large number of delays.

5.Minimize Watchers and use Use $watchCollection.

If your Angular app is slow, it means that you either have too many watcher, or those watchers are working harder then they should. Angular uses dirty checking to keep track of all the changes in app. This means it will have to go through every watcher to check 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 again, to make sure that all of the changes has propagated. It will continue to do so, until all of the watchers have been updated and app has stabilized. Using $watch with two parameters is good but using $watch with three parameters, i.e. $watch(value,function(){},true), makes Angular perform deep checking (to check every property of the object). But this could be expensive. Hence, to resolve such a performance issue, Angular provides $watchCollection(value, function(){}) which acts almost alike $watch with 3rd parameter except it only checks first layer of object properties at low cost.  

6.Use Bind once

Angular 1.3 added :: notation to allow one time binding. In summary, Angular will wait for a value to stabilize after it is first series of digest cycles, and will use that value to render the DOM element. After that, Angular will remove the watcher forgetting about that binding. If you are on pre 1.3 version of Angular you can use this library to achieve similar results  

7.ngOptions  should be used instead of ng-repeat when require

provides memory benefits increasing speed by not creating a new scope for each repeated instance provides more flexibility in how the select’s model is assigned allows for binding of non-string values to the model So in summary, the ngOptions directive is more flexible and more efficient and ngRepeat should be avoided for options

8. Use ng-if instead of ng-show

ng-show will render an element, and use display:none to hide it, ng-if will actually removes the element from DOM, and will re-create it, if it is needed.You may need ng-show for an elements that toggles on an off often.  

9.Debounce ng-model:

You can debounce the input with ng-model.For example you need to fetch data from api based on the key word you type on a text box.Instead of each keyup you can trigger the digest cycle after 200 ms, so you need to use ng-model-options={debounce:200}. This makes digest cycle to get triggered no more than once per 250ms due to the changes in this input model.  

Leave a Reply

Your email address will not be published. Required fields are marked *