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.