As so many others, we are using Modernizr.js on every page. Modernizr.js must run in the HTML Head (it’s a JS library for browser feature detection & HTML5 polyfill & async JS loading).
Our build of this library is about 8 kb before HTTP compression, so the actual download time is negligible.
The classic performance advice from a few years back was to never in-line JS, especially not in the head, as it used to block browser downloads. So scripts which absolutely must execute before initial rendering should be loaded last in Head, and loaded via an external file: <script src="modernizr.js"></script>
A quick look at Browserscope.org seems to indicate that most modern browsers don’t have the blocking issue anymore, as the “|| CSS + Inline Script” case is green for IE9+. In-lining the JS would save an HTTP request, and for us the time saved by eliminating the first HTTP request for the JS file is greater than the additional download time by in-lining on every page load.
What is the feeling in this community, is it anno 2012 best to load small, fast Head javascripts as external files, or in-line with the HTML? Are there edge cases I didn’t think of?
