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")
}
Related
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 2 years ago.
Improve this question
Are all the HTML files linked to the same JavaScript file, or do you need multiple JavaScript files? Is there ever a point where you need multiple CSS files?
When it grows large enough :)
Simple websites might only need one HTML file and no separate JS or CSS files. If a site has multiple pages that are returned from the web server, they would need to be separate HTML files (or separate rendered templates, etc.).
If a website or web app has enough JS and/or CSS that it's inconvenient to keep in one file, either because of the load time or the annoyance of editing a file that large, or the complexity of knowing which parts of the file go with which pages or components or templates, that's a good time to split those files in to multiples.
Most modern rich web applications aren't edited/written in terms of the specific files that get served to the browser anymore, instead those end-result files are produced by a bundler like Webpack, FuseBox, etc., into either single or multiple JS (and possibly CSS) files which are dynamically loaded by other internal JS code when they need to be. Smaller and simpler/less interactive websites might have multiple HTML files (or rendered templates) that share the same JS and CSS.
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 :)
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 8 years ago.
Improve this question
I'm starting on Javascript and learning best practices, but I haven't found anywhere saying which is better:
1) Separate scripts:
<script>
// script A here
</script>
<script>
// script B here
</script>
2) Putting scripts together
<script>
// script A here
// script B here
</script>
Neither. Since scripts are usually shared between pages, it's better to keep them separate from your HTML:
<script type="text/javascript" src="urlOfScriptA.js"></script>
<script type="text/javascript" src="urlOfScriptB.js"></script>
If you cancombine them, you save a request, so it's even better:
<script type="text/javascript" src="urlOfCombinedScript.js"></script>
But for development it can be handy to have separate files. You can use tools to combine and minify your scripts. That way, not only are they combined into one script (resulting in less requests), but also they are compressed as much as possible, saving bandwidth and loading time.
For now, I wouldn't worry about that yet. Keep the files separate if you think that is easier to work with. And then, later, you can find a tool that can combine and minify them for you. Since this is a slow process, you shouldn't do that on the fly, and it's inconvenient to do it in a development environment, so only combine and minify them when you publish the site.
Organisation.
Do the scripts do stuff directly related to each other?
If yes: Merge.
If no: Keep separate.
(Although ideally they should be in external .js files according to the same rules of separation, then merged by a compiler/minifier before being served)
It's best practice to put your Javascript on the server as a single file (to prevent files loading in the wrong order).
You can still work in individual files, but use some concatination / minimization software to compile it.
There are lots of different ways to achieve this, but it generally depends on your working environment.
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 3 years ago.
Improve this question
I understand the basic principles of script/style compression. What I would like to know is how do I integrate minified/combined scripts into my process and not interrupt my normal development flow?
I obviously want to use the regular files while developing then switch to the minified versions for deployment. I currently use YepNope to load my scripts. Is there some sort of conditional I could use to tell the browser to load the regular files?
Environment: VS 2010
My solution to this was to go with Microsoft's own Ajax Min its pretty nice. Compression is on par with some others I used.
As far as telling the browser to load minified versions or full, I added that into the post build script. Basically if you are in this particular environment then do not build the minified versions. Then in the js I have a little flag that points to one or the other depending on environment.
Hope this helps.