Versión basada en CDN: una red de entrega de contenido es una red de servidores que está disperso geográficamente para permitir un rendimiento web rápido al ubicar clones de contenido web más cerca de los drogadictos o facilitar la entrega de contenido dinámico (por ejemplo, transmisiones de cintas de video en vivo). Cada servidor CDN está ubicado en lo que se llama el «borde de la red» cerca de la web que el host garcon, que es donde se origina el sitio web. Por esta razón, los servidores de CDN se denominan con frecuencia “servidores perimetrales”. “Cada servidor almacena o almacena en caché clones de un subconjunto del contenido web (líneas HTML, imágenes, audio, cintas de video, operaciones) desde el servidor host. Al reducir la distancia entre este contenido y los drogadictos, la red de entrega de contenido ayuda al editor del sitio web a brindar un rendimiento dinámico, reducir el tiempo de carga de su web y controlar su propio consumo y costos de ancho de banda.
¿Cómo funciona?
Como se señaló preliminarmente, una CDN funciona al ayudar a un editor web a ofrecer un rendimiento rápido y de calidad avanzada para la web a través de una distribución feliz desde servidores que están más cerca de ellos que el servidor de origen del sitio web. Por ejemplo, suponga que su sitio web está basado en el Reino Unido (RU). Aún así, la CDN sirve a ese usuario desde un servidor perimetral en los EE. UU., cerca del usuario, si alguien de los Estados Unidos (EE. UU.) accede a su punto. El resultado es un rápido y feliz desempeño de carga y operación web, así como una mejor experiencia de usuario.
CDN para sitios web: no todos los editores de sitios web necesitan un CDN. Un sitio web original de la academia, por ejemplo, puede no necesitar un CDN porque los servidores perforarán el punto desde una posición cercana. Pero si tiene un sitio web rico en medios, contenido de carga crítica que requiere una entrega rápida, una CDN puede ser su mejor opción.
Ejemplo 1: puede incluir la biblioteca Bootstrap en su HTML directamente desde la red de entrega de contenido (CDN). Ahora escribamos un ejemplo usando la biblioteca Bootstrap de 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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
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>
Producción:
Ejemplo 2: estamos usando Bootstrap 4.2 CDN en el siguiente ejemplo.
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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png"
alt="image">
</div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por gurjeetsinghvirdee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA