- jQuery Tutorial
- jQuery Home
- jQuery Intro
- What is jQuery
- jQuery History
- jQuery Example
- jQuery Selectors
- jQuery Get Started
- jQuery Syntax
- jQuery Selectors Manipulate
- jQuery Events
- jQuery Effects
- jQuery Effects
- jQuery Hide/Show
- jQuery Fade
- jQuery Slide
- jQuery Animate
- jQuery stop()
- jQuery Callback
- jQuery Chaining
- jQuery hide()
- jQuery show()
- jQuery toggle()
- jQuery fadeIn()
- jQuery fadeOut()
- jQuery fadeToggle()
- jQuery fadeTo()
- jQuery slideDown()
- jQuery slideUp()
- jQuery slideToggle()
- jQuery animate() Custom
- jQuery delay()
- jQuery HTML
- jQuery html()
- jQuery Get
- jQuery Set
- jQuery Add
- jQuery Remove
- jQuery CSS Classes
- jQuery css()
- jQuery Dimensions
- jQuery text()
- jQuery val()
- jQuery css() Custom
- jQuery before()
- jQuery prepend()
- jQuery after()
- jQuery insertAfter()
- jQuery append()
- jQuery appendTo()
- jQuery clone()
- jQuery remove()
- jQuery empty()
- jQuery detach()
- jQuery scrollTop()
- jQuery attr()
- jQuery prop()
- jQuery offset()
- jQuery position()
- jQuery addClass()
- jQuery hasClass()
- jQuery toggleClass()
- jQuery width()
- jQuery height()
- jQuery innerWidth()
- jQuery innerHeight()
- jQuery outerWidth()
- jQuery outerHeight()
- jQuery wrap()
- jQuery wrapInner()
- jQuery wrapAll()
- jQuery unwrap()
- jQuery Traversing
- jQuery Traversing
- jQuery Ancestors
- jQuery Descendants
- jQuery Siblings
- jQuery Filtering
- jQuery AJAX
- jQuery AJAX Intro
- jQuery Load
- jQuery Get/Post
- jQuery Misc
- jQuery closest() method
- jQuery noConflict()
- jQuery Filters
- jQuery ajax() method
- jQuery children() method
- jQuery data() method
- jQuery each() method
- jQuery eq() method
- jQuery extend() method
- jQuery filter() method
- jQuery find() method
- jQuery get() method
- jQuery grep() method
- jQuery length property
- jQuery is() method
- jQuery not() method
- jQuery param() method
- jQuery radio button
- jQuery read more/read less
- jQuery star rating
- :enabled selector
- :disabled selector
- noConflict() method
- :nth-child selector
- parent() method
- post() method
- ready() function
- removeAttr() method
- replaceWith() method
- resize() method
- siblings() method
- stop() method
- trigger() method
- trim() method
- jQuery getJSON() method
- jQuery replaceAll() method
- jQuery on() method
- jQuery off() method
- jQuery first() method
- jQuery last() method
- jQuery isNumeric() method
- jQuery :reset selector
- jQuery size() method
- jQuery contains() method
- jQuery ajaxSend() method
- jQuery ajaxError() method
- jQuery :lang() selector
- jQuery :lt() selector
- jQuery :gt() selector
- jQuery map() function
- jQuery next() method
- jQuery nextUntil() method
- jQuery error() method
- jQuery now() method
- jQuery parseJSON() method
- jQuery inArray() method
- jQuery dblclick() method
- jQuery $.proxy() method
- jQuery has() method
- jQuery index() method
- jQuery insertBefore() method
- jQuery merge() method
- jQuery nth-of-type() selector
- jQuery prev() method
- jQuery prevAll() method
- jQuery scroll() method
- jQuery scrollLeft() method
- jQuery slice() method
- jQuery contents() method
- jQuery nextAll() method
- jQuery offsetParent() method
- jQuery parents() method
- jQuery parentsUntil() method
- globalEval() method
- undelegate() method
- triggerHandler() method
- toArray() method
- removeProp() method
- removeData() method
- queue() method
- prependTo() method
- noop() method
- makeArray() method
- keypress() method
- isPlainObject() method
- isFunction() method
- isEmptyObject() method
- isArray() method
- focusout() method
- focusin() method
- event.preventDefault() method
- clearQueue() method
- andSelf() method
- andBack() method
- jQuery dequeue() method
- jQuery end() method
- jQuery even() method
- jQuery :file selector
- jQuery :hidden selector
- jQuery isWindow() method
- jQuery odd() method
- jQuery parseXML() method
- jQuery :password selector
- jQuery.unique() method
- jQuery.uniqueSort() method
- jQuery :visible selector
- jQuery.isXMLDoc() method
- jQuery add() method
- jQuery Examples
- jQuery Examples
- jQuery Editor
- jQuery Quiz
- jQuery Exercises
- jQuery Certificate
- jQuery Form
- jQuery serialize()
- jQuery serializeArray()
- jQuery References
- jQuery Overview
- jQuery Selectors
- jQuery Events
- jQuery Events
- jQuery click()
- jQuery bind()
- jQuery unbind() method
- jQuery blur()
- jQuery focus()
- jQuery select()
- jQuery change()
- jQuery submit()
- jQuery keydown()
- jQuery keypress()
- jQuery keyup()
- jQuery mouseenter()
- jQuery mouseleave()
- jQuery hover()
- jQuery mousedown()
- jQuery mouseup()
- jQuery mouseover()
- jQuery mouseout()
- jQuery load()
- jQuery unload()
- jQuery delegate()
- jQuery Effects
- jQuery HTML/CSS
- jQuery Traversing
- jQuery AJAX
- jQuery Misc
- jQuery Properties
- Selected Reading
- How to change the background image using jQuery
- How to Detect a Mobile Device
- offset vs position in jQuery
- Checkbox validation in jQuery
- Use of moment JS to change date format in jquery
- jQuery Redirect to Another Page After 5 Seconds
- JQuery Validation
- jQuery get Difference between two Dates in days
- Dynamic Drag and Drop table rows using JQuery Ajax
- Add Edit Delete Table Row in JQuery
- Add remove input fields dynamically using jQuery with Bootstrap
- JQuery photo gallery with thumbnail
- Dynamically Add Remove input fields using JQuery Ajax
- Barcode jQuery example
- jQuery Timepicker
- Read more functionality using jQuery
- jQuery CDN
- JQuery Pagination
- Get Selected Value in Drop-down in jQuery
- JQuery Input Mask Phone Number Validation
- Integrate jQuery Fullcalendar using Bootstrap, PHP and MySQL
- Allow only 10 numbers in textbox using Jquery
- JQuery left side menu
- Automatically Refresh or Reload a Page using jQuery
- Lazy load images using jQuery
- Create a Tic TAC Toe Game using jQuery
- How to Convert an HTML Table into Excel Spreadsheet using jQuery
- Import Excel data into HTML table using JQuery
- Create a To-Do list using JQuery
- JQuery Page Pilling
- QR Code Generator using HTML, CSS, and jQuery
- Phone Number Keyboard using HTML and jQuery
- JQuery UI Checkboxradio
- How to Create a Custom Image Magnifier using jQuery
- JQuery UI Control groups
- How to create a simple map using jQuery
- JQuery Blockrain/ Tetris game
- How to display a digital clock using HTML, CSS, and JavaScript
- JQuery Multiscroll.js
- JQuery Sort
- JQuery Calendar
- JQuery menu-aim plugin
- JQuery Typewriter
- JQuery Product Tour
- Upload image with progress bar using jQuery
- How to add options to a select element using jQuery
- How to remove close button from jQuery UI dialog using jQuery and css
- JQuery Crop Plugin
- Vertical Dot Navigation Plugin
- jQuery jTippy Tooltip Plugin
- Create a 3D Text Effect using HTML and CSS and jQuery
- Jquery Flickerplate Plugin
- jQuery bootstrapSelect Plugin
- Froala editor plugin
- Gauge chart plugin using jQuery
- Horizontal Scrollable Timeline Plugin - jTimeline
- Skype Chat jQuery Plugin
- Whatsapp Chat Widget
- Twenty Twenty jQuery Plugin to Compare Images
- jQuery Filter Table
- Language Translation with JavaScript
- jQuery Animated Border Plugin
- jQuery Palette Color Picker
- jQuery Excel Export Plugin Library
- jquery social counter plugin
- jQuery Page Flip
- How to create an online radio using jQuery and jPlayer
- jQuery File manager for web
- Automatically Format your Numbers and Currencies using jquery
- jquery cookie consent plugin
- jQuery Coverflow widget
- jQuery PayPal HTML Shop
- Full Screen video Background using jquery
- jQuery Push Notification Plugin
- Create a menu item animation on hover
- Jquery Countdown Timer
- Jquery dragStart Event
- Jquery dragStop event
- Picture Puzzle Game using Jquery
- Jquery Captcha Widget
- Jquery Search Slide out Plugin
- How to Get the Textbox Value in jQuery
- Planetarium Jquery Plugin
- jQuery on-place Confirm Boxes
- Carousel with Drag and Wheel using Jquery
- Before and After Slider using jQuery
- Round Slider jQuery Plugin
- Jquery sticky header
- jQuery Age Verification plugin
- Pietimer jQuery Plugin
- DoubleScroll using Jquery
- Day Night Toggle using Jquery
- Q&A
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.
After setting up jQuery into your HTML file, proceed by including the below code.
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.
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.
For Cloudflare, consider the below URL:
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.