What is CDN Based Version ?
Last Updated :
10 Nov, 2021
CDN Based Version: A content delivery network is a network of servers that’s geographically dispersed to enable brisk web performance by locating clones of web content closer to druggies or easing delivery of dynamic content (e.g., live videotape feeds). Each CDN server is located on what’s called the” network edge” near to web than the host garcon, which is where the website originates. For this reason, CDN waiters are frequently called” edge servers. “Each server stores or caches clones of a subset of the web content — HTML lines, images, audio, videotape, operations — from the host server. By reducing the distance between this content and druggies, the content delivery network helps the website publisher give a brisk performance, reduce lading time for its web and control its own bandwidth consumption and costs.
How it works?
As preliminarily noted, a CDN works by helping a web publisher deliver quickly, advanced-quality performance for the web through happy distribution from servers that are closer to them than the website’s origin server. For illustration, suppose your website is grounded in the United Kingdom (UK). Still, the CDN serves that user from an edge server in the US, near to the user, If someone from the United States (US) accesses your point. The result is briskly happy lading and web operation performance, as well as a better user experience.
CDN for websites: Not every website publisher needs a CDN. An original academy website, for illustration, may not need a CDN because servers will pierce the point from a near position. But if you have a media-rich website, charge-critical content that requires fast delivery, a CDN maybe your best option.
Example 1: You can include the Bootstrap library into your HTML directly from Content Delivery Network (CDN). Now let us write an example using the Bootstrap library from Twitter CDN.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link href=
rel="stylesheet" integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<style>
.nav-link,
a {
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-success">
<div class="container-fluid">
<a class="navbar-brand" href="#">
GeeksforGeeks
</a>
<button class="navbar-toggler" type="button"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active"
aria-current="page" href="#">
Events
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Courses
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Articles
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Jobs
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">
Student
</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
|
Output:
Example 2: We are using Bootstrap 4.2 CDN in the following example.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<link rel="stylesheet" href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src=
integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
<style>
p {
font-size: 1.8em;
}
.lead {
font-size: 1.8em;
}
.fixed-bottom {
padding: 20px 700px;
font-size: 2em;
}
</style>
</head>
<body>
<center>
<div class="body">
<div class="fixed-bottom bg-success text-white">
<nav>GeeksforGeeks</nav>
</div>
<div class="jumbotron">
<h1 class="display-4">Hello, Geeks!</h1>
<p class="lead">GeekforGeeks</p>
<hr class="my-4">
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles
</p>
<a class="btn btn-primary btn-lg"
href="#" role="button">
Learn more
</a>
</div>
<div class="jumbotron">
<h1 class="display-4">Hello, Geeks!</h1>
<p class="lead">GeekforGeeks</p>
<hr class="my-4">
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles
</p>
<a class="btn btn-primary btn-lg" href="#"
role="button">Learn more</a>
</div>
<img src=
alt="image">
</div>
</center>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...