jQuery getScript vs Embedding Script in File

Question

I was wondering whether use jquery´s getScript or not.

I have a jQuery plugin that I need to include in my site, but I am unsure what to do and I am wondering if there is a difference between these approaches:

In my case, I have to include a rather big script, but only for IE browsers. At this moment I do it like this:

if($.browser.msie){
 //minifed code
}

Now I was wondering if this:

if($.browser.msie){
 $.getScript('link to minified script');
}

would have any advantages/disadvantages? Or if it is more or less the same thing?

Answer 1

There will be disadvantages to getting an external script.

i.e. ONE HTTP request

if($.browser.msie){
 //minifed code
}

TWO HTTP requests

 if($.browser.msie){
 $.getScript('link to minified script');
}

Your browser can only generally cope with 2 http requests at any one time. So from a performance point of view, the first will be faster.

further explanation

with getScript, IE users will have a smaller request, (-the size of your "minified code"). But everyone else will have to download the external script everytime (+ the size of your external script * number of page requests) + delay in response due to extra HTTP request.

with the minified code everyone will have to download your size of your minifed code (+minified code size).

Presuming your minifed code is say 5K and is accessed 10 time that means:

IE GetScript:

(5K * 10) + performance of using second HTTP request = 50K+

Non-IE

0

////////////////////////////////////////////////////////

IE nonGetScript

5K

non-IE

5K

Answer 2

Is better to use:

if($.browser.msie){
 //minifed code
}

because .getScript() will never cache the file.

Answer 3

These are two completely different things. In one case you have your script embedded to the page so it is accessible right away and you don't need any additional code to verify whether it is available or not. However, in the second case you're loading the script as an external resource, which will mean that there can be situations when you will need to process possible errors of communication, script errors etc.

Answer 4

There is a different between both the approaches. The first approach where you are embedding will download the whole script even if the browser is not ie. It will increase the page size which overhead on performance of your page loads.

The second apporach would be better where you are loading script from external js file only when it is need that means only when the browser is IE. So the performance would be better in other browsers.

Also you mentioned that the script is very big. So it would be better to include that script in external js file. Since these files gets cached in clients machine adding to the performance. No need to fetch it again and again

Answer 5

So according to the source which you have to drill down a bit you can see that getScript is adding a script tag for you, so there is no difference. Other than the (small) bit of processing to start jQuery and process the JavaScript that adds the script element. I think the big difference is it lets you programmaticly inject the script tag so you can add logic like a browser test.

Answer 6

There is no need for embedding script in file, users which have another browser should not get it. $.getScript is just shorthand to $.ajax with dataType script, so it just loads script and execute it.