There are plenty of opinions about organizing markup, but the W3C is the predominant authority in such matters. When referring to the proper position of
script tags, the latest W3C content is a bit vague.
The W3C Recommendation
<head> tag and used
$( document ).ready() to force it to wait for the document to finish loading before it executes.
Wouldn’t it be simpler to just put the
script tags at the bottom of the document? YES. In rare cases, you may want to keep it at the top, which you can view in the drawbacks below.
Script Tags at the Bottom
Just like everyone else says,
script tags should go right before the closing
/body tag. Yahoo, for example, says the same thing. I’m writing this in 2014 by the way. Maybe this will go out of style in a couple years, but for now, its considered best practice to put the tags at the bottom.
Benefits of Script Tags at the Bottom
- The page isn’t stuck on a white screen waiting for scripts
- Elements are loaded by the time your scripts want to interact with them
- Multiple items can be downloaded simultaneously (scripts only 1 at a time)
- If a 3rd party site is down, the script… and the site, will not load
Loading a script at the top halts all other downloads, resulting in one script at a time and only a white screen on the display.
Other content can be downloaded two at a time from each source, allowing many concurrent loads. It’s a much better user experience to have the page content load on the page first. If you use a content delivery network, they distribute loading of each request to serve from multiple sources. This results in the fastest loading.
Drawbacks of Script Tags at the Bottom
Some scripts need to run before the document loads, as it loads, or actually builds the page itself using
document.write. In this case, the script needs to be in the
Instead of using
document.write though, new websites should take advantage of Ajax functionality in JQuery or other libraries.