Do script tags write tags to other script tags?

Question

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

 <!-- JavaScript at the bottom for fast page loading: http://developer.yahoo.com/performance/rules.html#js_bottom --> <!-- Grab Google CDN 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 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 concurrent downloads, so it is recommended to put them at the bottom .

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

Or does he look ahead and run all the scripts loaded as quickly as possible (in parallel), and simply delay the execution of each script until the previous one completes the execution?

Answer 1

My question is : does the browser really wait for jQuery to be fully loaded and executed before it starts loading plugins.js and then script.js ?

It may or may not be, but probably not; browsers try (within the limit) to parallelize downloads in order to quickly load pages.

Or does he look ahead and run all the scripts loaded as quickly as possible (in parallel), and simply delay the execution of each script until the previous one completes the execution?

That's right, because this part is required by specification (in the absence of async or defer ). And, as your example shows, it cannot even determine the order of the scripts until the script is run, as the script can insert another script. But he can download them and prepare them.

Answer 2

I found this information a more appropriate answer to this question by copying the contents below from http://www.html5rocks.com/en/tutorials/speed/script-loading/ , for more details.

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

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

Ah, blissful simplicity. Here, the browser will download both scripts in parallel and execute them as soon as possible, preserving their order. "2.js" will not be executed until "1.js" executes (or does not), "1.js" will not be executed until the previous script or stylesheet is executed, and so on. .d. Etc.

Unfortunately, the browser blocks the further display of the page while all this is happening. This is due to the DOM APIs from the "first century of the Internet", which allow you to add lines to content that is parsed by a parser, such as document.write. New browsers will continue to scan or analyze the document in the background and start downloading for external content that may be needed (js, images, css, etc.), but rendering is still blocked.

That's why the great and useful world of performance recommends putting script elements at the end of your document, as it blocks as little content as possible. Unfortunately, this means that your script is not browsed by the browser until it has loaded all of your HTML code, and by this point it has started loading other content such as CSS, images, and frames. Modern browsers are smart enough to prioritize JavaScript over images, but we can do better.

Answer 3

The HTML5 specification says:

If no attribute [i.e. async and defer] is present, then the script is selected and executed before the user agent continues parsing p.

If the page is not analyzed, then the user agent cannot know what subsequent resources need to be extracted, therefore, the strictly corresponding browser will not be able to receive additional resources until the first one is executed.

To understand why this makes sense, imagine the first script contains

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

without proper closing of comments, then everything that follows the script in the markup will become part of the comment until the next --> encountered. This can lead to the omission of one or more links to resources.