Thursday, August 22, 2013

3 CDN URL to load jQuery into Web Page from Google, Microsoft

jQuery is one of the most popular and powerful JavaScript library, but in order to use it, you need to load into your webpage using standard HTML <script> tag. Based on whether your webpage is public accessible or for a organization, you can either choose to load jQuery library from local file system, bundled inside your web application or you can directly download using one of the content delivery network (CDN) e.g. Google or Microsoft CDN. Choosing CDN to download jQuery can offer a performance benefit because there servers are spread across the globe. This also offer an advantage that if visitor of your site has already downloaded a copy of jQuery from the same CDN, then it won't have to be re-downloaded.  By the way if you want to bundle jQuery into your web application or want to load it from local file system, you can always download latest version of jQuery from jQuery site at http://jquery.com. Installing jQuery required this library to be placed inside your web application and using the HTML <script> tag to include it into your pages e.g. <script type="text/JavaScript" src="scripts/jquery-1.10.2.js"></script>. jQuery site offers compressed and uncompressed copies of jQuery files, uncompressed file is good for development and debugging, but can slow down page loading if used in production. Compressed file saves bandwidth and improves performance in production. In this article, I am sharing couple of CDN URLs from where you can directly load jQuery files into your web page, this includes popular Google CDN, jQuery CDN and Microsoft CDN.


List of URL to include jQuery library into web page

Ladoing jQuery from Google and Microsoft CDN URLHere is the list of couple of content delivery network, which provides jQuery hosting. You can use any of these URL to include or reference jQuery library into your page. As I said CDN networks improves loading of jQuery files by offering local hubs, as well as, since they are popular, it might be possible that your visitor has already downloaded jQuery from requested CDN. In first case it helps to load jQuery faster from closest server, while in second case it can leverage already downloaded version of jQuery, which means more faster response time. Here are three most popular content delivery network URLs for loading jQuery library in your web pages.

1. Google CDN URL to download jQuery
http:////ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js is the Google CDN url to download jQuery version 1.10.1, you just need to include that into src attribute of HTML <script> tag as shown below:

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


One of the worth noting thing is jquery.min.js, which is actual jQuery library, .min version is a compressed production version, which is without debug information to reduce size of jQuery, so that it can be loaded faster.

2. jQuery's CDN to download jQuery files
To use the jQuery CDN, just reference the jQuery library directly from http://code.jquery.com in the script tag, as shown below :

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

This will download jQuery version 1.10.1, but you are free to download earlier jQuery version including jQuery 1.4 or jQuery 1.6. visit http://code.jquery.com to see all available files.

3) Microsoft's CDN to load jQuery JavaScript library
Microsoft CDN also host some of the most popular third party JavaScript libraries, including various version of jQuery.  You can use following URL to reference jQuery directly inside src attribute of <script> tag.

jQuery version 1.10.0              : http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js
jQuery version 2.0.0            : http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js

Where to include jQuery - Head or Body

You can include <script type="JavaScript" src="/scripts/jquery.min.js"> 
in either <head> or at the bottom of the page, just before the </body> tag. Former way of loading JavaScript library is older and later is a newer way to do the same, only difference is performance. By loading jQuery at the bottom of page, you let page gets loaded and rendered ,and doesn't wait for jQuery or any other JavaScript library to be loaded. By the way with modern browser, this performance difference is negligible.

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Tutorials</title>
  </head>
  <body>
  
        <!-- Your HTML structures -->
  
        <!-- including jQuery from local resource -->
    <script src='scripts/jquery.min.js'></script>
  </body>
</html>

By the way if you have  put all your jQuery code inside another JavaScript file, than make sure you put it after jQuery.

Summary

Here are the three popular CDN URL to include jQuery library version 1.9.0 directly into your web page :

jQuery CDN URL           : http://code.jquery.com/jquery-1.9.1.min.js

That's all on this list of URL to download or include jQuery files into web page. I have shared mainly two ways of referencing jQuery files, from local file system of your web application, or directly downloading from one of the popular CDN network e.g. Google CDN. We have also seen benefit of including compressed version of jQuery file and using CDN network for hosting jQuery. Finally, we learned benefit of putting <script> tag at bottom of <body> tag instead of <head>, mainly faster loading of web page.

No comments :

Post a Comment