一个商品店如果想做大做强，在外地开分店就是个很好的决策，通过这种方式，其他地区的人也能快速的购买到该商店出品的商品。同样，如果按照这个思路，服务器在各个地区开分器？于是乎，CDN（内容分发网络）由此而生。

什么是CDN？

CDN即Content Delivery Network,翻译成中文就是内容分发网络。

我们先来举一个现实例子：

张三在北半球，他想访问服务器位于南半球的xx网，因为距离限制原因，张三从输入URL到加载出来内容很慢，这是一个跨越半个地球的网络请求。但如果，xx网服务器在北半球就设置了个分身，张三便能很快的访问到网站资源。而这种网络就叫CDN.

来看一张CDN网络分布图：

基于这样图，我们来探究一下当张三发送网络请求在CDN模式下都会有哪些过程：

DNS 解析： 首先张三数据 www.xx.com 之后，浏览器会常规的发起DNS解析请求，把域名变成IP地址。如果是网站启用了CDN，这个时候DNS服务器就会返回CDN关联的IP地址，而不是原地址。
选择最佳边缘节点： 随后，张三的浏览器收到了CDN地址，然后浏览器又向CDN发送请求。CDN会根据地理位置、网络条件等因素综合判断然后选择最近的节点或者缓存服务器。
内容缓存阶段： 如果当前节点服务器内有浏览器请求的资源，就把这个资源返回给浏览器，如果没有，那就再把请求转发给源服务器。
内容交付： 如果当前边缘节点或者源服务器已经响应了请求，CDN就会把内容交付给用户浏览器。

注意：如果边缘节点没有资源再向源服务器请求资源，源服务器可能会直接返回给用户，也可能先给边缘节点再给用户。

这便是CDN工作的大致流程，看图：

有这种方便存储加快网站性能的模式，肯定是好东西。但是，不是说任何资源都适合放在CDN中。

其实在前端领域主要是一些静态资源：比如一些不经常变化的文件，比如图片、CSS样式表、JavaScript文件、字体文件等等。

JavaScript 库：几乎所有的都有， jQuery、React、Vue.js、Angular 等。因为要满足世界各地的开发者使用，所以最好的办法就是CDN开分店。
CSS 库和框架：例如 Bootstrap、Foundation、Semantic UI 等CSS框架
字体文件：包括Google Fonts、Font Awesome等常用字体库中的字体文件
图像和图标：一些常用的图像和图标文件，如google、tiktok等社交媒体图标、UI图标集等
动画库：例如Animate.css等CSS动画库
代码高亮库：例如Prism.js等代码高亮库，用于在网页上展示代码块，并提供丰富的语法高亮和样式定制。
数据可视化库：例如D3.js、Chart.js等数据可视化库
工具库和插件：还有一些常用的工具库和插件，如lodash、axios、moment.js等

总结下来就是：常用的、广泛使用的。

这要涉及到服务器，都没有省钱的。

同样，CDN成本也是一个问题。如果部署策略（流量的量、存储空间）不合理，通常会产生高价流量费用。