What difference does it make to use several script blocks on a web page?

Question

Edit: As Andrew Moore pointed out this question is a duplicate of Two separate script tags for Google Analytics? So this question should be deleted to avoid cluttering Stack Overflow, unless there is a point in keeping this one, since it will probably show up in slightly different searches.

What difference does it make to use more than one script block on a web page? I have pasted in the standard code for including Google Analytics as an example, and I have seen the same pattern used in other places. Why is this code separated into two separate script blocks instead of just using a single one?

<script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
    try{
        var pageTracker = _gat._getTracker("UA-xxxxxx-x");
        pageTracker._trackPageview();
    } catch(err) {}
</script>

Answer 1

In your example, the first script block uses document.write to write another script element, which loads an external script, and then the second script element uses things defined in that external script. I'm quite sure that dividing it into two script blocks is necessary for it to work.

If you're not using such weird trickery, putting multiple script blocks in a row will usually do nothing special. Having them in different parts of the page is useful is when you want scripts to run while the document is loading. If your page is very long, you might want some script to run while it's still loading, to initialize things as soon as possible. Replacing elements with widgets should be done as early as possible to avoid things jumping around when the page eventually finishes loading.

Answer 2

The second <script> contains code that depends on google-analytics.com/ga.js loading.

Non-deferred scripts are executed in the order in which they exist in the DOM.

The first <script> injects a new <script> after itself (with the src pointing to google's ga.js) which immediately loads and executes -- only then does the second <script> get executed.

Answer 3

If the code in the first blocks ends with an exception, the second part will work too.

Answer 4

<script> tags are executed in sequence. A <script> block cannot execute if the previous one isn't done executing.

The first <script> tag is in charge of creating the Google <script> tag which will load the external js. After the first <script> is finished executing, the DOM looks like the following:

<script></script> <!-- First Script Tag -->
<script></script> <!-- Google Injected Script -->
<script></script> <!-- Second Script Tag -->

This guarantees that the second <script> tag will not execute until the .js is done loading. If the first and second <script> would be combined, this would cause the _gat variable to be undefined (since the Google injected script will not start loading until the first script is done executing).