Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

From where is it better to import a js file?

I would like to know which solution is the fastest and the best for my web pages between importing a javascript file from an external source and internally. Which pro and cons for each solution. For example, which one is the best:

 < script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

or

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

(same for json2.js)

I could not find any tips on google

Thanks!

like image 438
remyremy Avatar asked Dec 17 '22 06:12

remyremy


1 Answers

The main benefit of using a CDN (Content Delivery Network) is that given their widespread use, the chances are your visitor may already have a cached copy of the script you're trying to load on their browser. This will completely negate any loading time. If they don't have a cached copy, the chances are the CDN would deliver it to them faster than your server could anyway. In my opinion it's best to use a CDN where possible.

Even with that in mind, CDN aren't infallible, and you don't want your site to rely 100% on someone else's server. I'd advise on having a local copy of your scripts and use those as a backup where possible. For jQuery, this is quite easy:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    if (typeof jQuery == 'undefined') {
        document.write(unescape("%3Cscript src='/Scripts/jquery-1.7.1.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
</script>

Other libraries may vary in their methods for testing if they're loaded, but the idea is the same.

It's also worth noting that if you are loading from Google's CDN ALWAYS use the full version number otherwise the script will not be cached.

That is to say if your request URL looks like this:

"http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" // highest 1.4 version (1.4.4)
"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" // latest version (1.7.1)

The expires header is set previous to the current date, so the effect of caching is nullified.

More info on this here

like image 58
Rory McCrossan Avatar answered Dec 23 '22 10:12

Rory McCrossan