Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have built many angular applications, and each time I try to improve app performance , architecture .. etc.
One strategy some people follow is to concatenate all JavaScript files in one minified file, and also all stylesheet files in one minified file, this however opposes with lazyload concept, for example angular oc lazyload loads state files in this manner:
//inject dependency
var myApp = angular.module("MyApp", ["oc.lazyLoad"]);
//load file
myApp.controller("MyCtrl", function($ocLazyLoad) {
$ocLazyLoad.load('testModule.js');
});
The question is which pattern will provide better performance concatenation or lazy loading ?
Depends on your application size.
If it's small - it will be enough to concatenate all js files into single one, and minify it.
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.
The answer for this depends on application that your are building. but I will explain you the Differences so it can help you to make a decision.
Advantages of concatenate in to a single file
It will definitely improve your app speed(except for the first time later you will get the cache benefit)
It will reduce the number of requests to your server or the static server where your static resources are hosted.
Advantages of lazy loading
Initial page load will be faster compared previous but there will be a delay while the user using your app because you will be loading the resource on demand (this may not feel good for user experience for some types of applications).
Will help you to reduce the number of requests to your server initially but as the app is being used by users it has to download all your resource one by one.
So finally I prefer the First option.
Hope this helps you :)
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
Right now, I work on multiple css and js files but I combine them all together in 1 big file. I am not sure if this is the right way. For example my js file is about 200kb(Foundation + jQuery). This file is only loaded at the end of the body, so I am not sure what is the best way, I mean the file size won't get smaller anyway if I split them up.
You should always combine your CSS and JS files into a single file per type as a general rule.
However, if you really want to play around with load optimization, you can try to take advantage of the amount of simultaneous downloads a browser can do at one time. If it can do 6 at a time, then you won't see any major performance hit, and you may even get a performance gain, for having up to 6 separate files so they can download in parallel.
I personally wouldn't count on the simultaneous downloads though. It is a better rule of thumb to just combine them.
You can always use Googles PageSpeed to review your site for load optimization.
You should always combine and minify CSS and JS files. The browser makes fewer a separate request for each file you have. That's a small hit, but if you have a lot of files, it adds up.
https://developers.google.com/speed/docs/insights/MinifyResources
https://blog.hubspot.com/marketing/reduce-http-requests
Task runners like Grunt and Gulp can help with this. You can set up a script to minify and combine (concat) your files all in one action.
Or your IDE might even have it built in, so that everytime you save, a new file is compiled.
Always make sure your JS is right before the closing body tag, unless you have a specific reason to put it higher on the page.
The best solution for optimizing a website is firstly
1. To reduce the number of files to be loaded which reduces the number of browser requests,
2. To use server cache, to removing the repetition of MySql queries or connections
3. To use browser cache for the bigs javascript files
4. Synchronous and asynchronous requests or Ajax/Jquery
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I'm writing a web tool using C#, HTML and JavaScript code based on the MVC pattern and I was wondering if it is smart (page load time, traffic, etc.) to load all needed scripts in the _Layout.cshtml.
Is there a difference in bundling all scripts together and load them in the head section of the _Layout.cshtml or load them in the actual views when needed?
Is there a best practice for this matter?
The best strategy is to "load what you really need". You should bundle all shared scripts and styles on one side and load that on the layout, and then create separate bundles for each view to load only what will be used on that particular page.
The difference would be that you will require more bundling configuration (as you would have one bundle per view), but IMHO, you will gain a lot more in a better code organization and avoid downloading unnecessary files.
Of course this all depends of what kind of application you are developing. But if you have all in one bundle and the project gets larger, it will be very difficult to later change the strategy as you will need to review all the dependencies on each view.
In terms of page load/traffic, it is clear that this strategy is better as the client will download only the files which are needed.
you can load script bundles in a view like this
#section scripts {
#Scripts.Render("~/bundles/movie")
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I have some questions about Javascript.
Most of my website's pages use js. For better performance, what should i do ? :
Write all of my js code in one file and link it with my pages ? Or one js file per page ?
Is it a bad manner that i never mix js into my html ? I like to have separate things (html, css, js)
Thank you.
For maintainability
Keep separate pages while developing the app, so that any one can make out which feature has been coded where.
For performance
Before deploying it for production, minify your js and css files so that there are less network calls to download those files.
Is it a bad manner that i never mix js into my html ?
No, having non-intrusive js is both good for readability and it is good for performance too since it gives you a chance to minify the js files. You can't minify inline js.
My experience is writing a relatively big website in ASP.MVC .
I did not write all the javascript code in one file because that would have been difficult to manage. I made a folder that included multiple javascript files, each having its own purpose.
If the javascript is more than say 10 lines of code, and you can put it outside the html file, i would advise so, because it is faster to look at .
It is easier to just have one .js file for all pages, but it is better for readability if you have multiple files.
Mixing javascript into HTML can be useful but it depends on your needs.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I'm looking for simple bullet point answers please. I've tried looking all over, Googling, other questions here but I can never find both advantages and disadvantages for each method.
This is the answer I got from W3Schools pertaining to external javascript files
Pros
It allows separation of concerns - which is not a big deal in simple pages but as the script grows larger you can have a monolithic html page. Big files in general are not ideal for maintainability
It allows caching - when the browser loads a script externally (whether it's be from your site or a cdn) it caches the file for future use. That's why cdn's are preferred for commonly used scripts. Makes the browser use a cached script instead of building a new one every time the page loads which makes the page load faster
More readable code - this ties into the first bullet point but nevertheless it is important. The smaller the files we humans are working with the better. It is easier to catch mistakes and much easier to pass of the torch to the next developer working on the project or learning from it.
Cons
The browser has to make an http request to get the code
There may be other browser specific reasons as well, but I believe the main reason is the separation of code into different components.
Probably the best advantage of using external javascript files is browser caching - which gives you a good performance boost.
Imagine you have a site that uses MyJsFile.js (a random 50kb javascript file that adds functionality to your websire).
You can:
embed it in every page, and add the 50kb to every page request (not ideal)
link it in every page (<script src="MyJsFile.js"></script>)
The second option is usually prefered because most modern browsers will only get the file once, and serve it from the browser cache instead of downloading it at every request.
Check out similar questions:
Why not embed styles/scripts in HTML instead of linking?
When should I use Inline vs. External Javascript?
Is it better to put the JS code on the html file or in an external file?
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm building a website that will have facebook-ish features (friends and what not) along with a marketplace and some forums. I've decided to use bootstrap as I'm not a good designer and rather than using Jquery I've come across a replacement for their plugins written in angular (UI bootstrap is the name).
Should I just have one giant angular file for my entire website, aka the plugins for UI one and add whatever else I need to do that, or should I load in two different files? One will be the pre-written plugins and the other one will be the web app needed for that page (for example having the marketplace web app in its own file and include both of them on the same page).
This is my first website so I'm trying to make it as efficient as possible, thanks for the input!
I'd do one for the scripts that you wrote and another for the vendor scripts.
But if you are starting new to gulp or grunt you should really consider using a scaffolding tool such as yeoman. If you use angular-fullstack generator you will see some good examples for both angular and grunt, as well as node.
Definitely not, you should only have one angular component per file. Working with a scaffolding tool such as Yeoman or Slush will make this much easier.
Additionally, I would recommend reading some of the AngularJS styleguides out there. John Papa's guide and Todd Motto's guide are good places to start. Here's a full list of AngularJS resources to get you started. Good luck!