Where should I put <script> tags in HTML markup?
Here's what happens when a browser loads a website with a <script> tag on it:
- Fetch the HTML page (e.g. index.html)
- Begin parsing the HTML
- The parser encounters a
<script>tag referencing an external script file. - The browser requests the script file. Meanwhile, the parser blocks and stops parsing the other HTML on your page.
- After some time the script is downloaded and subsequently executed.
- The parser continues parsing the rest of the HTML document.
Step #4 causes a bad user experience. Your website basically stops loading until you've downloaded all scripts. If there's one thing that users hate it's waiting for a website to load.
Why does this even happen?
Any script can insert its own HTML via document.write() or other DOM manipulations. This implies that the parser has to wait until the script has been downloaded & executed before it can safely parse the rest of the document. After all, the script could have inserted its own HTML in the document.
However, most JavaScript developers no longer manipulate the DOM while the document is loading. Instead, they wait until the document has been loaded before modifying it. For example:
<!-- index.html --><html> <head> <title>My Page</title> <script src="my-script.js"></script> </head> <body> <div id="user-greeting">Welcome back, user</div> </body></html>Javascript:
// my-script.jsdocument.addEventListener("DOMContentLoaded", function() { // this function runs when the DOM is ready, i.e. when the document has been parsed document.getElementById("user-greeting").textContent = "Welcome back, Bart";});Because your browser does not know my-script.js isn't going to modify the document until it has been downloaded & executed, the parser stops parsing.
Antiquated recommendation
The old approach to solving this problem was to put <script> tags at the bottom of your <body>, because this ensures the parser isn't blocked until the very end.
This approach has its own problem: the browser cannot start downloading the scripts until the entire document is parsed. For larger websites with large scripts & stylesheets, being able to download the script as soon as possible is very important for performance. If your website doesn't load within 2 seconds, people will go to another website.
In an optimal solution, the browser would start downloading your scripts as soon as possible, while at the same time parsing the rest of your document.
The modern approach
Today, browsers support the async and defer attributes on scripts. These attributes tell the browser it's safe to continue parsing while the scripts are being downloaded.
async
<script src="path/to/script1.js" async></script><script src="path/to/script2.js" async></script>Scripts with the async attribute are executed asynchronously. This means the script is executed as soon as it's downloaded, without blocking the browser in the meantime.
This implies that it's possible to script 2 is downloaded & executed before script 1.
According to http://caniuse.com/#feat=script-async, 97.78% of all browsers support this.
defer
<script src="path/to/script1.js" defer></script><script src="path/to/script2.js" defer></script>Scripts with the defer attribute are executed in order (i.e. first script 1, then script 2). This also does not block the browser.
Unlike async scripts, defer scripts are only executed after the entire document has been loaded.
According to http://caniuse.com/#feat=script-defer, 97.79% of all browsers support this. 98.06% support it at least partially.
An important note on browser compatibility: in some circumstances IE <= 9 may execute deferred scripts out of order. If you need to support those browsers, please read this first!
(To learn more and see some really helpful visual representations of the differences between async, defer and normal scripts check the first 2 links at the references section of this answer)
Conclusion
The current state-of-the-art is to put scripts in the <head> tag and use the async or defer attributes. This allows your scripts to be downloaded asap without blocking your browser.
The good thing is that your website should still load correctly on the 2% of browsers that do not support these attributes while speeding up the other 98%.
References
Just before the closing body tag, as stated on
http://developer.yahoo.com/performance/rules.html#js_bottom
Put Scripts at the Bottom
The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.
Non-blocking script tags can be placed just about anywhere:
<script src="script.js" async></script><script src="script.js" defer></script><script src="script.js" async defer></script>asyncscript will be executed asynchronously as soon as it is availabledeferscript is executed when the document has finished parsingasync deferscript falls back to the defer behavior if async is not supported
Such scripts will be executed asynchronously/after document ready, which means you cannot do this:
<script src="jquery.js" async></script><script>jQuery(something);</script><!-- * might throw "jQuery is not defined" error * defer will not work either-->Or this:
<script src="document.write(something).js" async></script><!-- * might issue "cannot write into document from an asynchronous script" warning * defer will not work either-->Or this:
<script src="jquery.js" async></script><script src="jQuery(something).js" async></script><!-- * might throw "jQuery is not defined" error (no guarantee which script runs first) * defer will work in sane browsers-->Or this:
<script src="document.getElementById(header).js" async></script><div id="header"></div><!-- * might not locate #header (script could fire before parser looks at the next line) * defer will work in sane browsers-->Having said that, asynchronous scripts offer these advantages:
- Parallel download of resources:
Browser can download stylesheets, images and other scripts in parallel without waiting for a script to download and execute. - Source order independence:
You can place the scripts inside head or body without worrying about blocking (useful if you are using a CMS). Execution order still matters though.
It is possible to circumvent the execution order issues by using external scripts that support callbacks. Many third party JavaScript APIs now support non-blocking execution. Here is an example of loading the Google Maps API asynchronously.