The problem with writing scripts at the head of a page is blocking. The browser must stop processing the page until the script is download, parsed and executed. The reason for this is pretty clear, these scripts might insert more into the page changing the result of the rendering, they also may remove things that dont need to be rendered, etc.
Some of the more modern browsers violate this rule by not blocking on the downloading the scripts (ie8 was the first) but overall the download isn't the majority of the time spent blocking.
The current popular convention is to place scripts before the closing </body> tag.
In general, you may want to place a script in the head that will modify the html/css behavior, libraries such as modernizr, html5shiv, etc. are meant to supplant the behavior of CSS, so should be in the <head>. Those are the only scripts I would place in the head section of the document.
Designing your page/site so that scripting isn't needed (to as much of an extent as possible) is the best guideline you can have for a public facing site that may rely on search traffic. If you are developing an intranet/extranet/saas application it isn't as important. What will go along with this is placing scripts at the bottom before the closing body tag, so that all other downloads on the page occur first.
Beyond any of this, having your scripts limited (through minification, and merging) to 6 on a page will allow for scripts to be downloaded simultaneously on browsers that support that behavior. There are tools/techniques that improve on this. Some will bind to the window/load or document/ready events so can be placed anywhere. Having your scripts, css and images on separate CDN domains can help (or spread across a few CDN domains). Avoid having more than 4 total domains in use on a given page as much as possible (excluding common ones such as google analytics, which is likely to already be in the local DNS cache.
Yes, if you did this as far as possible, your HTML and CSS would be a mess of styles and possibly even more inefficient due to added file size. It is up to the developer to pick the best balance. Don't agonize over optimizing every line as you write it, get it working then see what can be beneficial.
As another commenter noted, it takes the browser milliseconds to figure it out how to apply your styles on page load. However, where this can have much bigger impact is with DHTML. Every time you change the DOM, the browser re-applies your whole style sheet to the page. In this scenario many inefficient selectors could make a visible impact to your page (perceived lagginess/ unresponsiveness).
The problem with writing scripts at the head of a page is blocking. The browser must stop processing the page until the script is download, parsed and executed. The reason for this is pretty clear, these scripts might insert more into the page changing the result of the rendering, they also may remove things that dont need to be rendered, etc.
Some of the more modern browsers violate this rule by not blocking on the downloading the scripts (ie8 was the first) but overall the download isn't the majority of the time spent blocking.
Check out Even Faster Websites, I just finished reading it and it goes over all of the fast ways to get scripts onto a page, Including putting scripts at the bottom of the page to allow rendering to complete (better UX).
The current popular convention is to place scripts before the closing
</body>tag.In general, you may want to place a script in the head that will modify the html/css behavior, libraries such as modernizr, html5shiv, etc. are meant to supplant the behavior of CSS, so should be in the
<head>. Those are the only scripts I would place in the head section of the document.Designing your page/site so that scripting isn't needed (to as much of an extent as possible) is the best guideline you can have for a public facing site that may rely on search traffic. If you are developing an intranet/extranet/saas application it isn't as important. What will go along with this is placing scripts at the bottom before the closing body tag, so that all other downloads on the page occur first.
Beyond any of this, having your scripts limited (through minification, and merging) to 6 on a page will allow for scripts to be downloaded simultaneously on browsers that support that behavior. There are tools/techniques that improve on this. Some will bind to the window/load or document/ready events so can be placed anywhere. Having your scripts, css and images on separate CDN domains can help (or spread across a few CDN domains). Avoid having more than 4 total domains in use on a given page as much as possible (excluding common ones such as google analytics, which is likely to already be in the local DNS cache.
I would suggest reading "Even Faster Websites" by Steve Souders for more coverage on this area. Optimizing performance is about more than just where to put your JS.
O'Reillys "Even Faster Web Sites" has a whole chapter on this entitled "Simplifying CSS Selectors". It references your link on Mozilla.
I think two points are worth bearing in mind.
Yes, if you did this as far as possible, your HTML and CSS would be a mess of styles and possibly even more inefficient due to added file size. It is up to the developer to pick the best balance. Don't agonize over optimizing every line as you write it, get it working then see what can be beneficial.
As another commenter noted, it takes the browser milliseconds to figure it out how to apply your styles on page load. However, where this can have much bigger impact is with DHTML. Every time you change the DOM, the browser re-applies your whole style sheet to the page. In this scenario many inefficient selectors could make a visible impact to your page (perceived lagginess/ unresponsiveness).