CDN原理与应用简要介绍

学习&实践爱好者

已于 2022-12-14 19:54:35 修改

阅读量9.5k

点赞数 1

分类专栏： HTML5与CSS3 前端开发 JavaScrip技术文章标签：网络

于 2022-08-10 21:30:00 首次发布

本文链接： https://blog.csdn.net/cnds123/article/details/126268941

版权

JavaScrip技术同时被 3 个专栏收录

132 篇文章 24 订阅

订阅专栏

HTML5与CSS3

82 篇文章 15 订阅

订阅专栏

前端开发

69 篇文章 4 订阅

订阅专栏

CDN原理与应用简要介绍

CDN的全称是Content Delivery Network（内容分发网络或内容交付网络）。CDN是构建在现有网络基础之上的智能虚拟网络，CDN依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取内容，降低网络延迟，提高访问速度。CDN的关键技术主要有内容存储和分发技术。简单来讲，CDN是用来进行加速的，它可以让用户更快获得所需的数据。

CDN的基本原理

CDN的基本原理是在用户访问相对集中的地区和网络设置一些缓存服务器。当用户访问网站时，利用全局的负载均衡技术将用户的访问指向距离最近的缓存服务器，由缓存服务器代替源站响应用户的访问请求。这样一方面减轻了源站服务器的工作压力，另一方面使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

CDN相关技术

CDN实现需要依赖多种网络技术，如负载均衡技术、动态内容分发与复制技术、缓存技术等是其中最主要的几种网络技术。

（1）负载均衡技术

负载均衡技术就是将网络中的流量尽可能平均分配到多个能完成相同任务的服务器或网络节点，由此来避免单个或部分网络节点过载瘫痪，影响正常的网络访问。

（2）动态内容分发与复制技术

在多数情况下，网站响应速度和访问者与网站服务器之间的距离有着密切的关系。如果访问者和网站之间的距离果园，之间的融信要经过多次路由转发和处理，网络延迟会大大增加。而内容分发和复制技术就是将网站主体中的大部分静态页面、图像和流媒体数据等分发复制到各地的加速节点上。所以，动态内容分发与复制技术也是CDN所需的一个重要技术。

（3）缓存技术

缓存技术已经不是一种新鲜技术。Web缓存服务通过几种方式来改善用户的响应时间，如代理缓存服务、透明代理缓存服务、使用重定向服务的透明代理缓存服务等。通过Web缓存服务，用户访问网页时可以将广域网的流量降至最低。对于公司内联网用户来说，这意味着将内容在本地缓存，而无须通过专用的广域网来检索网页。对于Internet用户来说，这意味着将内容存储在他们的ISP的缓存器中，而无须通过Internet来检索网页。这样无疑会提高用户的访问速度。CDN的核心作用正是提高网络的访问速度，所以，缓存技术将是CDN所采用的又一个主要技术。

CDN有哪些优点？

（1）本地Cache加速，提高了访问速度；

（2）跨运营商的网络加速，保证不同网络的用户都得到良好的访问质量；

（3）远程访问用户根据DNS负载均衡技术智能自动选择Cache服务器

（4）自动生成服务器的远程Mirror（镜像）cache服务器，远程用户访问时从cache服务器上读取数据，减少远程访问的带宽、分担网络流量、减轻原站点web服务器负载等功能；

（5）广泛分布的CDN节点加上节点之间的智能冗余机制，可以有效地预防黑客入侵。

简单地说 CDN是一组分布在世界各地不同地理位置的服务器，以实现网站内容的快速交付。当用户使用CDN访问网站时，浏览器会连接到其中一个边缘服务器并向其请求网站内容。选择的服务器通常是最靠近最终用户的服务器，以减少时间延迟。多个缓存服务器的使用分散了流量并防止了服务器过载。What Is CDN? Learning All About Content Delivery Networks

CDN - 术语表 | MDN

CDN被广泛用于传输 stylesheets 和 JavaScript 等静态资源，像Bootstrap、Jquery 、vue.js等。

CDN应用

光看上面的介绍可能觉得比较抽象，其实在我们的网页中也可以使用这个技术，下面结合实例简要介绍之，为此先复习一下HTML 的<script> 、<link>标签。

<script> 标签

HTML <script> 标签的 src 属性用于指定外部脚本文件的 URL。

URL可能的值有：

绝对 URL - 指向其他站点（比如 src="www.example.com/example.js"）。

相对 URL - 指向站点内的文件（比如 src="/scripts/example.js"）

<link>标签

其中“rel=stylesheet”，rel是关联的意思，关联的是一个样式表(stylesheet)文档，它表示这个link在文档初始化时将被使用。rel是Relations的缩写，指关联到一个stylesheet（样式表单)。

Bootstrap

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。它简洁灵活，使得 Web 开发更加快捷。主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)。

bootstrap官网

Bootstrap · The most popular HTML, CSS, and JS library in the world.

Bootstrap中文网

Bootstrap v5 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 前端工具库。 | Bootstrap 中文网

网页中使用Bootstrap方法有二：

一是官网您可以从 http://getbootstrap.com/ 上下载 Bootstrap使用。Bootstrap文件夹包含bootstrap.min.js 和 bootstrap.min.css 文件，只要把html网页文件与Bootstrap文件夹放在一起，然后用相对路径引用jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件即可。

二是从 CDN 中载入Bootstrap，即在线尝试，下面的例子用到了https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css

通过CDN使用Bootstrap例子源码如下：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>在线尝试 Bootstrap</title>
   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script>
</script>
</head>
<body>
<h3>使用在线Bootstrap产生的不同样式的按钮</h3>
<button type="button" class="btn btn-default">默认按钮</button>
<button type="button" class="btn btn-default btn-lg">大的默认按钮</button>
</body>
</html>

运行效果如下图：

jQuery

jQuery 是一个 JavaScript 库。jQuery的字面意思其实就是JavaScript和查询（Query），即用于辅助开发JavaScript的库。

网页中使用 jQuery方法有二：

一是官网https://jquery.com/download/ 下载 jQuery 库使用。

二是从 CDN 中载入 jQuery，下面的例子用到了https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

通过CDN使用jQuery的例子源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过CDN使用jQuery</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我隐藏段落</button>
</body>
</html>

运行效果如下图：