Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Do running script tags block other script tags from downloading?

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?

like image 253
callum Avatar asked May 21 '12 07:05

callum


1 Answers

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.

like image 166
T.J. Crowder Avatar answered Oct 20 '22 15:10

T.J. Crowder