Question

What are the differences between these two JavaScript implementations in an HTML file?

1. <script src="foo.js" type="text/javascript"></script>

2. As Google Analytics does it programatically:

     (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript';
   ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 
   'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0];
   s.parentNode.insertBefore(ga, s);
       })();
   

Are there any differences how the browser loads / renders the HTML page or is there some differences with the connection for caching such JS script?

Answer 1

Your first script tag forces the browser to synchronously pull in that file; in other words, the browser will stop all other activity to download, parse and execute the script before proceeding with rendering the page.

In the second case (your google stuff), a script element is dynamically created and the file is loaded in asynchronously.

First tag is blocking, second one is not.

More on async:

• https://developer.mozilla.org/en-US/docs/HTML/Element/Script

More on the impact of “blocking” scripts:

• http://developer.yahoo.com/performance/rules.html

Summary: put scripts at bottom of page if they’re blocking.