Say I have a fairly hefty JavaScript file, packed down to roughly 100kb or so. By file I mean it’s an external file that would be linked in via <script src='...'>, not pasted into the HTML itself.
Where’s the best place to put this in the HTML?
<html> <head> <!-- here? --> <link rel='stylesheet' href='stylez.css' type='text/css' /> <!-- here? --> </head> <body> <!-- here? --> <p>All the page content ...</p> <!-- or here? --> </body> </html> Will there be any functional difference between each of the options?
The Yahoo! Exceptional Performance team recommend placing scripts at the bottom of your page because of the way browsers download components.
Of course Levi’s comment ‘just before you need it and no sooner’ is really the correct answer, i.e. ‘it depends’.