An interesting question is, why not just put ALL scripts at the end of the <body> tag, after the HTML of the page has loaded and the CSS probably did as well?
The only thing I can think of is if you have code ON the page which uses these scripts. But why not just put that code at the end of the page, too?
The main reason this happens is that most MVC platforms generate pages piecemeal, say for example you are generating a 'product' page:
It has a 'template' that contains your header,footer and scripts that everyone relies on.
Then the product piece may also need a script or 2 and finally it may need to add some dynamic love to the page like say: $(myMagicHelper(779,'magic');), in general people are used to just inlining these kind of mini-scripts close to the bit that generates the product html. It can be migrated to a system that defer generates it in the footer, but usually would involve a larger amount of change (at least on projects I worked on). I guess this trick saves you a bit of time migrating some inline scripts to the bottom.
It doesn't really have one. Annoying, because it's 90% of the way there- views can insert code into specific "sections" of the template, but sub-views can't.
If they just enabled that then you could make a "JS" section just before </body> and have all your JS inserted there.
A strong reason to not do so is when you want some part of the page to be immediately enhanced with JavaScript (like a login form). If the page has many images and other resources, your users will have an awkward experience, with the scripts suddenly engaging at a time that feels arbitrary. While some scripts absolutely belong at the bottom of the page, it is a very good idea to decorate JavaScript widgets immediately after the HTML is rendered, as in:
<div id="widget1234"></div>
<script>
(function() {
var widget = new Widget({
el: document.getElementById('widget1234')
});
// ...
})();
</script>
Note that the script is also inlined here: Losing the overhead of an HTTP request is beneficial when a widget needs to spring to life immediately: You want it to be active the moment the HTML is finished.
Simply have the widgets start as display: none -- or even better -- visibility: hidden until they are rendered with js. The css accompanying the widgets should do this.
Yes, that should be the case anyway: The widget shows itself when it is finished decorating. But even then, there's no sense in deferring decoration until after some other arbitrary resources have loaded.
An interesting question is, why not just put ALL scripts at the end of the <body> tag, after the HTML of the page has loaded and the CSS probably did as well?
The only thing I can think of is if you have code ON the page which uses these scripts. But why not just put that code at the end of the page, too?