# CDN | 青训营笔记

用户5413337357429
118 阅读4分钟

CDN | 青训营笔记

这是在青训营班会上老师提问常见面试内容时同学们较多人评论的内容，由于我还没学到，所以自己去找资料补全自己的知识。

CDN

CDN是内容分发网络（Content Delivery Network）的缩写。它是建立并覆盖在承载网之上，由分布在不同区域的边缘节点服务器群组成的分布式网络。

工作原理

CDN的工作原理是通过在不同区域部署边缘节点服务器，形成一个分布式网络。当用户访问资源时，首先通过DNS查找离用户最近的CDN节点（边缘服务器）的IP。如果CDN上并没有缓存资源，则会到源站请求资源，并缓存到CDN节点上，这样，用户下一次访问时，该CDN节点就会有对应资源的缓存了。简单来说，CDN就是通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容。

适用场景

  • 网站站点/应用加速
    即static 内容加速，静态内容加速，如：html image js css 等

  • 视音频点播/大文件下载分发加速
    基本上都是视频点播，MP4、flv等视频文件，例如国内的优酷、土豆、腾讯视频、爱奇艺都是一样。

  • 视频直播加速
    视频直播加速，流媒体切片、转码、码流转换等等。

  • 移动应用加速
    移动APP更新文件（apk文件）分发，移动APP内图片、页面、短视频、UGC等内容的优化加速分发。

CDN优点

  • 缩短网站加载时间
    通过将内容分发到访问者附近的 CDN 服务器（以及其他优化措施），访问者体验到更快的页面加载时间。由于访问者更倾向于离开加载缓慢的网站，CDN 可以降低跳出率并增加人们在该网站上停留的时间。换句话说，网站速度越快，用户停留的时间越长。
  • 减少带宽成本
    网站托管的带宽消耗成本是网站的主要费用。通过缓存和其他优化，CDN 能够减少源服务器必须提供的数据量，从而降低网站所有者的托管成本。 -增加内容可用性和冗余
    大流量或硬件故障可能会扰乱正常的网站功能。由于 CDN 具有分布式特性，因此与许多源服务器相比，CDN 可以处理更多流量并更好地承受硬件故障。
  • 改善网站安全性
    CDN 可以通过提供 DDoS 缓解、安全证书的改进以及其他优化措施来提高安全性。CDN 可以使用新的 TLS/SSL 证书保护站点的安全，这将确保高标准的身份验证、加密和完整性。了解有关 CDN 的安全问题，并探索可以采取什么措施来安全地交付内容。

CDN代码示例

在前端Vue项目中实现CDN加速，可以通过以下步骤实现：

  • 在项目的index.html文件中，引入外部CDN链接，例如：
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
</body>

  • 在项目中，将有在CDN加速的插件，不用 import … from … 这样去引入了，直接换成 const … = require ("…") 这样去引用。

  • 打开webpack.base.conf.js文件，修改配置。找到下面的位置，把代码添加进去：

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'axios': 'axios'
},
  • 重启服务器

在这个示例中，我们在项目的index.html文件中引入了外部CDN链接，例如Vue，Vue-router，Vuex和Axios等库。这些库文件将从CDN服务器上获取，而不是从我们的服务器上获取。由于CDN服务器遍布全球各地，用户可以从离他们最近的CDN节点获取这些文件，从而加快网页的加载速度。

此外，在webpack.base.conf.js文件中，我们添加了一个externals配置项，用来指定哪些库不需要打包到最终的代码中。这样，在最终生成的代码中，这些库将不会被包含在内，而是通过外部CDN链接来获取。

因此，借助外部CDN链接来实现CDN加速，使用户可以更快地获取所需内容，从而加快网页的加载速度，这是在搭建网站的时候的必修课。

avatar
文章
阅读
粉丝