I can use ng-include to include a partial inside an angular view or I can use server side partials to do it on the server. I'm thinking about using server side partials instead of angular partials and then ng-include (with the script tag) because I read somewhere that angular partials create new scopes and this can hurt performance on $digest.
Is there any validity to this. What is the effect on performance when using angular includes
ng-include will create a new scope and register a watch (on a path expression used by ng-include) on a scope where the ng-include is used. While this incurs some additional processing it is still JavaScript-objects based and as such is very fast. The effect of a new watch plus an additional scope should be totally negligible in most cases.
The only real difference I can see is that ng-include will include / render your partial asynchronously, so you might see a bit of delay, especially when fetching partials over the network (but this can be mitigated by pre-loading partials as described here: https://stackoverflow.com/a/12346901/1418796)
In short: in most cases the effect of ng-include should be negligible if partials are pre-loaded.
One last comment: "premature optimization is the root of all evil". Don't start micr-performance adjustments until you measure performance of your application and determine that ng-include is a bottleneck.
Related
I've done a lot towards optimisation of one part of my application, due to huge amount of elements in DOM. I implemented lazy loading, watched for every digest cycle to be as small as possible, etc.
Now my question is, if anyone else has encountered, that the initial compiling and rendering is slower than rendering for the second time(like navigate to different app location and back again).
Is angular caching somehow and if so, how can I force to cache it in advance?
$Routing in angular is done using $templateRequest which in turn utilizes $templateCache. That's why all consequent template changes looks faster.
Tools like gulp-angular on yeoman.io for example automatically will build your application and place your HTML files in the $templateCache for you. It will also concatenate and minify all of the scripts.
Ultimately what you are looking for is for the html snippets to be all included in that single javascript file so that there arent individual HTML GET requests for each one.
We currently have a large complex application build using Angular (1.3).
I have a page that is maybe using 20 custom directives (nested).
I'm finding the load time (angular bootstrap) is very slow especially on android.
Using chrome timeline profiling I can see the angular bootstrap is taking about 800ms on desktop, but about 8 seconds on android (using remote debug).
This is on a fairly new android phone (samsung s5). However on an iPhone 5 (it takes no more than 4 seconds.
My question is does directive compilation have to take that long? I don't think my directives link functions are actually taking long to execute. Will replacing directives withe a combination of ng-include/ng-controller make it better? Will replace 20 directives with one big directive make a difference?
Why would the mobile chrome browser be so less performant than iOS safari browser and very similiar hardware?
Thanks,
It is likely due to the high number of requests a browser makes to render your website. Each directive has a template, so that's 20 requests on top of all the others (js files, images, css etc). You also have to consider that each directive/template is loaded when its parent directive/template is loaded since they are nestled, and this can make a huge impact on performance.
It may also load faster on desktop and varies on mobile based on a browsers simultaneous connection limit. I believe for iOS safari it is 6, and mobile chrome is 4.
You need to reduce the amount of template loading, and ensure you are making use of a browsers cache. In your case it may be better to combine some directives to improve performance.
Your fisrt question
My question is does directive compilation have to take that long?
No. Angularjs can handle much more than 20 custom directives quickly according to my experience.
I don't think my directives link functions are actually taking long to execute.
I think you may run into issues and need to spend time on optimization probably. Maybe too much DOM manipulating or HTML reflow.
Your second question
Will replacing directives withe a combination of ng-include/ng-controller make it better?
I don't think so. ng-include/ng-controller are also directives. There is no essential difference.
Your third question
Will replace 20 directives with one big directive make a difference?
No. The number of directives doesn't matter. What matter is what directive does.
And your last question. It's a fact sucks and torments me long time. I also don't know why.
I have an application made with angularJS, whole application is composed of IIFEs(Immediately Invoked Function Expression). Every module, directive, controller is itself an IIFE and they are around 100s.
I want to know what is the performance pitfall when an app has so many IIFEs.
It is OK to use IIFEs with AngularJS?
How good is using libs like browserify and requirejs with AngularJS for managing the dependencies?
Can you please throw some light on this?
The question you need to ask first is whether you've got some internal parts within the IIFE that you don't want to expose to the global scope.
The whole point of creating a closure in this manner is to mimic encapsulation and avoid polluting the global scope.
The performance pitfall is not so easy to measure; I think the performance issue is negligible when you create the IIFE (don't forget you're just creating a function). One performance issue that I might think of is that when you reference a function variable form an inner function, you need to travel through the scope chain and get it from the closure object.
I would recommend you to look at patterns like module pattern, revealing module pattern etc. I personally use the revealing module pattern.
Browserify and requireJS are two libraries that implement two different specs; the commonJS and AMD respectively. These two specifications try to accommodate a functionality that is not supported by ES3 or ES5; That is a way of defining module and then loading them in specified locations.
If you want to define modules and load them synchronously in a similar manner to hose nodeJS works, you can use Browserify. In addition, Browserify allows you to use the same modules both for client-side and server-side (as long as you're using nodeJS).
On the other hand if you want to asynchronously load your modules you can go with AMD and requireJS, but you won't be able to reuse them on the back-end.
Finally, bare in mind that everything you've mentioned is not directly connected to angularJS; those are some good JavaScript practises to overcome some issues of the language itself. It can be well used whether you're working with angular or not.
I would recommend that you use either browserify or requireJS; it will benefit you in the long run. Just imagine having 100 JS files; you would need to out the manually into your html in the correct order based on the dependency graph. You can easily come across issues like race conditions where one file should have been inserted before another one.
As for the performance overhead of IIFEs, you shouldn't have any serious issues.
As another answer said, IIFEs are a good general practice, independent of AngularJS.
If you're concerned about the performance of IIFEs, go ahead and check out these performance tests on JSPerf (or write your own):
http://jsperf.com/iife-antecedents-in-js
http://jsperf.com/immediate-anonymous-function-invocation
While some ways of IIFE creation are clearly much slower than others, I wouldn't worry about the performance of IIFEs unless you're in a large loop.
Currently our templates are in html files, while the build does minify them (with htmlmin)
It appears there are two approaches to optimize templates loading in angular.
using $templateCache as explained here. Which means putting the minified templates into a js file, probably with this grunt plugin.
Inlining the template,which means using them with angular script directive, probably using this grunt plugin
from npm usage stats I can judge that the first option is more popular, but I'm not sure why, what are the tradeoffs between the two options and which gives better performance.
Thanks!
To say anything more about performance it would have to be measured. But from the theoretical point of view (1) should be more performant since with (2) templates are ending in the $templateCache anyways, and using the <script> directive means additionally:
* having those <scripts> in the DOM tree
* processing <scripts> tags during the DOM compilation with this directive:
https://github.com/angular/angular.js/blob/master/src/ng/directive/script.js
In short: it looks like using <scripts> directive means more runtime processing in a browser. Should be confirmed with some performance testing, but I would assume that one won't see dramatic performance difference.
I have read the AngularJS documentation doc page but I am still not clear on what exactly happens. How does the compiler run? I mean is the compiler a piece of Javascript that is triggered on page load to run and inspect the DOM. If that is the case then is there much overhead every time the page is loaded?
I also have read that you should never change the DOM inside your controller. Why is that and could someone give me a simple example of what I should not do.
You should do a walkthrough of the mobile phone tutorial on the site. The directions are clear and it will show you how to set up your app and where the proper code should be. As Arun said, DOM manipulation should be handled mainly in your directives. Controllers handle the logic, the template handles data binding and incorporates directives to accomplish DOM manipulation. As you work through the tutorial, you will start to see Angular as a different way of thinking.
As far as compilation goes, the index.html page is rendered, the scripts are then loaded, and then Angular gets to work looking for the attributes to include the view template based on the routing and controllers. The template is then parsed with variables bound and watched, and then displayed to the user. Of course, there is a slight delay, as you can see on http://builtwith.angularjs.org/ . On the top right, you see "75 neat things built with AngularJS". If you refresh the page, you notice 75 is replaced with a ? until the page loads (less than a second later). Honestly, unless your controllers and views are incredibly complex, rendering time will never be very long at all. Personal example, I am generating a reports page with 12 columns of data 144 rows long, by parsing and looping through a JSON object multiple times and running calculations and creating a new object, all in the controller when the template is called. The page appears blank for about a quarter of a second before the data appears, templated, formatted, and with the appropriate callbacks.
Again, try it out, see for yourself.