jQuery CDN

In this article, we would be learning about CDN associated with jQuery but moving let's recall what jQuery is. jQuery is a JavaScript library primarily designed to manipulate event handling, animation using CSS and Ajax, HTML DOM traversal, etc. It is free and open-source software running on the MIT License and is trusted by almost 73% of the 10 million popular websites. Let us now study CDN more.

The CDN in jQuery stands for Content Delivery Network. The main purpose of CDN is to include jQuery without actually having to download or keep it in the website's folder of our website. There are plenty of such jQuery CDNs available in the market today. For example, Cloudflare, jQuery's CDN, Google and Microsoft CDN, etc.

A CDN is nothing but delivery or a distribution network, be it a geographically distributed network of proxy servers and its data centers. The main of CDN is to provide highly scalable performance and availability of relative service distribution to end-users. Let's discover some popular ways of exploring jQuery CDN by working with different types of options available these days. Before proceeding to make use of jQuery CDN, let's carry out the local installation to properly use it on our system.

Installation

Generally, there are two downloadable versions available for jQuery on the web. They are:

Production version: It is a compressed and minified version for your live website.

Developer version: It is primarily used for full fledged actions like developing and testing of readable and compressed code.

Note: It is recommended to use uncompressed version while programming or debugging and compressed versions for tasks like bandwidth and performance boosting.

The next task is to setup using the steps shown below.

<head>
<script src="jquery-3.5.1.min.js"></script>
</head>

After setting up jQuery into your HTML file, proceed by including the below code.

<html>
   <head>
      <title>jQuery Setup</title>
      <script type = "text/javascript" src = "/jquery/jquery-3.5.1.min.js">
      </script>
   </head>
   <body>
      <h1>jQuery Setup</h1>
   </body>
</html>

Now, you can make use of the jQuery CDN as shown in the below steps.

You can include the jQuery library directly into your index.html code from the CDN. If we talk about Google, consider the below HTML code for importing jQuery CDN into your HTML code.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.
min.js">
      </script>
  
      <script type = "text/javascript">
         $(document).ready(function(){
            document.write("Hello, JavaTpoint");
         });
      </script>
   </head>
 
   <body>
      <h1>Hello</h1>
   </body>
</html>

Similarly, you can use jQuery CDN for Microsoft as shown below. Keep the code as shown above and just change the URL under the head tag as shown below.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-
3.2.1.min.js">
      </script>
  
      <script type = "text/javascript">
         $(document).ready(function(){
            document.write("Hello, JavaTpoint");
         });
      </script>
   </head>
 
   <body>
      <h1>Hello</h1>
   </body>
</html>

For Cloudflare, consider the below URL:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.
min.js">
      </script>
  
      <script type = "text/javascript">
         $(document).ready(function(){
            document.write("Hello, JavaTpoint");
         });
      </script>
   </head>
 
   <body>
      <h1>Hello</h1>
   </body>
</html>

Advantages and Disadvantages of using jQuery CDN

Advantages:

The advantages of using jQuery CDN are as follows:

Decreasing the load on your website since the jQuery file will be loaded from a CDN and not from your website. The CDN will reduce the load on your website by loading the data from CDN and not directly from the website. It will improve the overall performance of the website.
Another advantage of CDN is because of the speed and agility it offers by not loading it directly from the site and thereby fetching the user with the concept of nearest position. CDN is powered by a lot of highly load balancing algorithms and data servers that ensures that jQuery is served at lightning speed.

Disadvantages:

The disadvantages of using jQuery CDN are as follows:

There might arise a situation of blockage while hosting the jQuery with CDN since there are filter and proxy services enabled on the user's connection.
The jQuery might fall out of balance under the condition of the timeout property enabled by most of the browsers which are 30 seconds, to be precise.

Summary

In this tutorial, we came across learning from scratch about how to set up jQuery to be used with CDN and not from your regular website. We also came across the overall architecture of the Content Delivery Network and how it enhances the performance of loading. We might have been familiar with HTML and CSS and alongside jQuery, CDN will help them enhance the load balancing factor to serve speed efficiently rather than depending upon the website. We also came across various installation techniques be it Google, Microsoft, or Cloudflare, and how to include them in the <head> tag of our HTML file. Lastly, we came across the advantages and disadvantages of using jQuery and discussed on what basis it should be used and when it should be implemented.

The jQuery CDN is therefore a unique toolkit for providing valuable load balancing support alongside managing the relative delivery service to the end-users.

Next TopicJQuery Pagination

← prev next →