jQuery CDN

Back to: jQuery Tutorials

jQuery CDN | Content Delivery Network

In this article, I am going to discuss jQuery CDN (Content Delivery Network). Please read our previous article, where we discussed the document.ready event in jQuery with Examples. At the end of this article, you will understand the following three-pointers.

1. What is CDN?
2. Advantages and Disadvantages of Using CDN
3. What if the jQuery files cannot be downloaded from the CDN?

What is CDN?

CDN stands for Content Delivery Network. A CDN is a system of distributed servers that host resources like images, CSS, JavaScript files, etc. Giant companies like Google, Microsoft, Yahoo provide a free public CDN from which we can load jQuery instead of hosting it in our own web server.

Examples of CDN:

GOOGLE CDN: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>

MICROSOFT CDN: <script src=”https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js”></script>

Advantages of Using CDN:

1. HIGH-CAPACITY INFRASTRUCTURES: Google, Microsoft, Yahoo provides great capacity and high scalability. The better CDNs offer higher availability and lower network latency.
2. DISTRIBUTED CDN SERVERS: When a user requests for a web page or a file the CDN server closest to that user is dynamically determined and is used to deliver the content to the user therefore speed of delivery increases.
3. BROWSER PRE-CACHING: jQuery is used in many popular websites. If a user has already visited a web page that uses jQuery from a CDN, and then if he arrives at your page then the jQuery file has already been cached by the browser, and no need to download the file again.
4. DIFFERENT DOMAINS: There is a browser limit on concurrent connections (file downloads) from a given domain. This number varies from browser to browser. For example, a browser permits two active connections, so the third download is blocked until one of the previous files has been fully retrieved. CDN files are hosted on a different domain. In effect, a single CDN permits that browser to download a further two files at the same time.
5. REDUCES SERVER LOAD: The HTTP request for jQuery is handled by the CDN server, so the load o on your web server is reduced. This also means there is a saving on your website bandwidth which in turn will reduce your hosting cost.
6. SEO FRIENDLY: Page load time is significant in SEO strategies because search engines consider it as one of the factors. Thus, developers can use jQuery CDN to ensure their webpage optimization for search engines.

Note: There are some limitations too. One of the disadvantages is that your client firewall may block the CDN. So, you may have to request your client to white list the CDN.

What if the jQuery files cannot be downloaded from the CDN?

Let us assume that the CDN is down or because of some network issue we are being unable to download jQuery files from CDN. In that case we have to fallback to use jQuery files that we have hosted in our own server. Let’s see how we can do that.

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
<script>
             window.jQuery || document.write(‘<script src=”js/jquery-3.6.0.min.js”>\x3C/script>’)
</script>

If jQuery is successfully downloaded then the jQuery property is added to the window object. If this is not found then jQuery is not downloaded. In that case, we are referring to the jQuery file that is present in our project folder.

In the next article, I am going to discuss jQuery Selectors with Examples. Here, in this article, I try to explain jQuery CDN and I hope you enjoy this article.