Do external javascript references cause the browser to wait until they are downloaded?

When your page is being parsed, and it comes across a <script src='someExternalSite/jquery.js'></script> or whatever, does the page wait until that file is download开发者_如何学运维ed and available before continuing to parse?

Added:

Do most browsers simultaneously download all the scripts to save time (even if they execute them in order)?

---

each tag blocks the page from further rendering until the js file fully downloaded. Its a good idea to place js file in end of body tag

---

does the page wait until that file is downloaded and available before continuing to parse?

Not only does it wait until the JS has been downloaded, it waits until it has been parsed and executed. The others advice about putting it at the end of page is spot on.

Do most browsers simultaneously download all the scripts to save time (even if they execute them in order)?

Actually, I think only the newer ones do. I came across a webpage about this ages ago that I didn't bookmark, sorry.

---

Yes it will block and the script will only be executed when other scripts before that are loaded.

E.g.

<script src='someExternalSite/script1.js'></script>
<script src='someExternalSite/script2.js'></script>

Most browsers will try to speed things up by loading these two scripts in parallel. Even if script2.js is loaded before script1.js, they won't execute until both are loaded.

I recently ran into trouble with this. So I elaborate a couple of related points.

document.write() forces the parser to stop, and inserting the script this way will still execute sequentially (script1.js before script2.js):

   document.write('<script src=\'someExternalSite/script1.js\'></script>');
   document.write('<script src=\'someExternalSite/script2.js\'></script>');

Finally, you can get completely asynchronous loading by doing:

var script1 = document.createElement('script');
script1.src = 'script1.js';
document.getElementByTagName('body')[0].appendChild(script1);    

var script2 = document.createElement('script');
script2.src = 'script2.js';
document.getElementByTagName('body')[0].appendChild(script2);    

The final one is very fast, since the scripts are loaded completely in parallel, but there's a big gotcha. For Webkit based browsers, the order is NOT guaranteed, script2.js will be executed before script1.js if it is loaded first. If you can work around that, say having all scripts in one javascript file, then this method is great.

Dynamic script addition should be ordered?

---

All main browsers should try to get those files synchronously cause the next script in the list could rely on the one right before.

---

Yes, that is why people recommend adding scripts just before the </body> tag, or using the defer attribute.