What is CDN Server & Advantages of Using CDN Server
CDN stands for Content Delivery Network. As the name suggests, it’s a network which delivers content. It is basically a system of distributed servers which delivers web content like images, css file, javascript file, jQuery file etc. to the websites.
In regard to jQuery, big companies like Microsoft and Google has their own public CDN servers where different versions of jQuery file are always available which a developer can use by adding a reference to it. This means a developer does not need to have a copy of it on his own server. Browser engine will automatically download that file from given CDN server.
Advantages of Using CDN Server
Reduction in Server Load: Since you are using a CDN server, the jQuery file will be downloaded from that server. As a result, there will be less load on your server and it will save a lot of bandwidth.
jQuery File in Browser Cache: Most of the websites are using CDN servers to download jQuery file and that file gets cached into browser cache. This means if someone visits your website, then browser engine will load that jQuery file directly from cache and there will be no need to download it again from a CDN server.
Distributed CDN Servers: There are bunch of CDN servers which are available worldwide. Whenever a user visits your website, then at that point jQuery file gets downloaded from the closest server near to that user based on his geographic location which will eventually reduce its download time.
Parallel Downloading: Browser engine always has a limit on downloading multiple files concurrently from a given domain. Depending upon your browser engine, it can download 2 or 3 files concurrently but 4th one will be blocked as long as the previous ones are being downloaded. Since CDN server points to different domain, we can have parallel downloads and there will be no waiting in downloading a jQuery file.
In some cases, it does happen that a firewall or AV blocks a CDN server. This means, it is not possible to download that jQuery file from given CDN server, thus your jQuery code will not work. In such a situation, you should always have a copy of jQuery file available on your server and you must add a check in your code file to make sure whether the jQuery file has been downloaded from given CDN server or not. If not, then download it from your own server.
To add a check, you can make use of Window object. If window.jQuery property is true, then it means jQuery file has been downloaded successfully. If not, then download jQuery file from your own server. Sample code is given below.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script>
window.jQuery || document.write("<script src='jquery-1.11.2.js'><\/script>");
</script>
<script type="text/javascript">
$(window).load(function (){
alert("Window Load Event Fired!");
});
$(document).ready(function (){
alert("Document Ready Event Fired!");
});
</script>
</head>
<body>
</body>
</html>
