5

What is the difference between the following two codes in an HTML file? If I add one more javascript file xyz.js after including the abc.js, is there any priority associated when the scripts are being used?

First code:

<script src="js/abc.js" type="text/javascript" language="javascript"> </script>

Second code:

<script language="javascript">
        /*same code of abc.js*/ 
</script
sumit
  • 10,935
  • 24
  • 65
  • 83

5 Answers5

3

The primary difference is that the javascript file can be cached by the browser and network devices so the user doesn't have to download it on every page load.

So if you have 100k of javascript files, your visitor only needs to download them once. Otherwise, they'd have to download those same exact 100k every page load and visit.

This allow applies to inline and external CSS and images as well!!

Granted this is only the tip of the iceburg of caching and browser performance (Steve's book is one of the web 'bibles'):

http://yuiblog.com/blog/2006/11/28/performance-research-part-1/

http://www.yuiblog.com/blog/2007/01/04/performance-research-part-2/

http://www.stevesouders.com/

Paul DelRe
  • 4,003
  • 1
  • 24
  • 26
3

What is the difference between the following two codes in an HTML file?

One requires an extra HTTP request, but gets cached. The other doesn't.

If I add one more javascript file xyz.js after including the abc.js, is there any priority associated when the scripts are being used?

Loading of external scripts is blocking. The first one will be loaded first. Then the second one will be loaded.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Isn't loading inline script also blocking? Not in the sense of loading the http connection but to actually read and execute the javascript. – Amir Raminfar Jul 21 '11 at 14:41
  • @Amir Raminfar — yes, obviously. – Quentin Jul 21 '11 at 14:43
  • @Quentin - So keeping the scripts in files is a good idea because user wont download it every time the page loads..right?? – sumit Jul 21 '11 at 14:46
  • isn't this only true if the scripts come from the same host? ex. if I load jquery from google's cdn and load another file from my own server, those requests will not block and be concurrent correct? – jondavidjohn Jul 21 '11 at 14:50
  • @jondavidjohn — They block *parsing*, not downloading. – Quentin Jul 21 '11 at 14:51
  • well, as @Amir points out, this point is moot as they block *parsing* the same whether they are external or inline. – jondavidjohn Jul 21 '11 at 14:54
1

They both cause the browser to read the javascript and execute it. The first code can leverage caching while the latter DOES NOT cache.

The first use case also requires another HTTP request which could be costly.

There is no priority otherwise.

Amir Raminfar
  • 33,777
  • 7
  • 93
  • 123
1

The first difference between loading a script from a file and running a script from a script tag is that the loading requires an extra HTTP request. This is usually trivial, but you will get a speed increase from having the script embedded in the page. However, loading from an external file does allow for the script to be cached. It seems like you cannot rely on caching, though.

Now, I should tell you, having all of your scripts hard-coded on the page is not very manageable. If you want to update one of the scripts but it's tied to a specific html file, it becomes that much harder to update.

As for your second question, scripts are loaded in order. All external loading is blocked while scripts are loading. Therefore, it is advisable to put all of your script includes at the bottom of the <body> tag.

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
0

Besides the primary reason of cacheing, a secondary and important difference is the maintenance of Separation of Concerns, which, among other things, goes to say that, in web development, markup (html) should be separated from style (css) and behaviors (js). These elements should be held in separate locations, and only linked to in the markup. This is important for project organization, ongoing upkeep and optimization. Writing a mess of spaghetti code with inline everything makes you a sad panda.

Bosworth99
  • 4,206
  • 5
  • 37
  • 52