How do I prevent JavaScript from blocking other JavaScript's from starting to download?
I have the following on my web site:
<html>
<body>
....
<script type="text/javascript" src=".js"></script>
<script type="text/javascript" src=".js"></script>
</body>
</html>
When I use the YSlow Firefox add-on, I can see from the network traffic tab that the google/google-maps.js JavaScript won't start downloading until ex.js has finishes downloading.
Question: How can I have both ex.js and google-maps.js begin downloading immediately and in parallel?
How do I prevent JavaScript from blocking other JavaScript's from starting to download?
I have the following on my web site:
<html>
<body>
....
<script type="text/javascript" src="http://example./ex.js"></script>
<script type="text/javascript" src="http://google./google-maps.js"></script>
</body>
</html>
When I use the YSlow Firefox add-on, I can see from the network traffic tab that the google./google-maps.js JavaScript won't start downloading until ex.js has finishes downloading.
Question: How can I have both ex.js and google-maps.js begin downloading immediately and in parallel?
4 Answers
Reset to default 3Use the <script> element's async or defer attribute:
Both
asyncanddeferscripts begin to download immediately without pausing the parser and both support an optionalonloadhandler to address the mon need to perform initialization which depends on the script. The difference betweenasyncanddefercenters around when the script is executed. Eachasyncscript executes at the first opportunity after it is finished downloading and before thewindow’sloadevent. This means it’s possible (and likely) thatasyncscripts are not executed in the order in which they occur in the page. Thedeferscripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is pletely finished, but before thedocument’sDOMContentLoadedevent.
deferis supported by IE4+, Firefox 3.5+, Chrome 2+, and Safari 4+.asyncis supported by Firefox 3.6+, Chrome 7+, and Safari 5+. (No IE support!)
defer is your best choice. Scripts will download in parallel and execute synchronously (in order). It's also better supported and more predictable than async. (See also this very detailed analysis of async/defer.)
<script defer type="text/javascript" src="script.js"></script>
It's ugly, but you can get scripts to download in parallel by injecting the DOM elements ... using javascript.
Check out this blog post for a working example.
This is normal for inline scripts in HTML. You could add the scripts dynamically using the following code:
<script type="text/javascript">
var head = document.getElementsByTagName("head")[0];
var sTag1 = document.createElement("script");
var sTag2 = document.createElement("script");
sTag1.type = sTag2.type = "text/javascript";
sTag1.src = "http://example./ex.js";
sTag2.src = "http://google./google-maps.js";
head.appendChild(sTag1);
head.appendChild(sTag2);
</script>
This could cause unexpected results, however - they may not be downloaded and parsed in the correct order, which is important if script 2 references variables or functions from script 1.
If you just want your HTML to load before the scripts load, keep them sequential and put them at the bottom of your HTML file, not in the head tag. This will load the page before downloading and parsing the script. See http://developer.yahoo/blog/archives/2007/07/high_performanc_5.html.
The JavaScript files will always download in the order they are specified.