Do running script tags block other script tags from downloading?

Question

This is from the index.html in HTML5 Boilerplate, just before the </body> tag:

<!-- JavaScript at the bottom for fast page loading: http://developer.yahoo.com/performance/rules.html#js_bottom -->

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>

<!-- scripts concatenated and minified via build script -->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- end scripts -->

<!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
     mathiasbynens.be/notes/async-analytics-snippet -->
<script>
  var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  s.parentNode.insertBefore(g,s)}(document,'script'));
</script>

I know that script tags can block parallel downloads, which is why it's recommended to put them at the bottom.

My question: Does the browser really wait for jQuery to be fully downloaded and executed before it even starts downloading the plugins.js and then the script.js?

Or does it look ahead and start all the scripts downloading as quickly as possible (in parallel), and just delay the execution of each script until the previous one has finished executing?

Answer 1

My question: Does the browser really wait for jQuery to be fully downloaded and executed before it even starts downloading the plugins.js and then the script.js?

It may or may not, but probably not; browsers try (within limits) to parallelize downloads to make page loads fast.

Or does it look ahead and start all the scripts downloading as quickly as possible (in parallel), and just delay the execution of each script until the previous one has finished executing?

Right, because that part is required by the specification (in the absense of the async or defer attributes). And as your example shows, it can't even necessarily determine the order in which scripts should run until the script has run, because the script may insert another script. But it can download them and have them ready.

Answer 2

The HTML5 spec says:

If neither attribute [i.e. async and defer] is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.

If the page is not parsed, then the user agent cannot know which subsequent resources need fetching, so a strictly conforming browser should not be able to fetch further resources until the first has actually been executed.

To see why this makes sense, imagine that the first script contains

document.write("<!--"); 

with no matching comment closure, then everything that follows the script in the markup will become part of a comment until the next --> is encountered. This may cause one or more resource references to be skipped.

Answer 3

I found this details more appropriate answer to this question, copied below contents from http://www.html5rocks.com/en/tutorials/speed/script-loading/ refer it for more details.

<script src="//other-domain.com/1.js"></script>

<script src="2.js"></script>

Ahh, blissful simplicity. Here the browser will download both scripts in parallel and execute them as soon as possible, maintaining their order. “2.js” won’t execute until “1.js” has executed (or failed to do so), “1.js” won’t execute until the previous script or stylesheet has executed, etc etc.

Unfortunately, the browser blocks further rendering of the page while all this is happening. This is due to DOM APIs from “the first age of the web” that allow strings to be appended onto the content the parser is chewing through, such as document.write. Newer browsers will continue to scan or parse the document in the background and trigger downloads for external content it may need (js, images, css etc), but rendering is still blocked.

This is why the great and the good of the performance world recommend putting script elements at the end of your document, as it blocks as little content as possible. Unfortunately it means your script isn’t seen by the browser until it downloads all your HTML, and by that point it’s started downloading other content, such as CSS, images and iframes. Modern browsers are smart enough to give priority to JavaScript over imagery, but we can do better.