哈喽，我是JL😄
共同成长是我一直以来的追求！✨
希望下面分享能让你有所收获💦
背景
性能优化是前端的必修之课，其中首屏加载的毒害深入人心。
CDN介绍
CDN（Content Delivery，即内容分发网络）指的是一组分布在各个地区的服务器。这些服务器存储着数据的副本，因此服务器可以根据哪些服务器与用户距离最近，来满足数据的请求。CDN提供快速服务，较少受高流量影响。
为什么使用CDN
CDN不能减少请求量，但是能提高首次请求响应速度。
但是因为缓存、本地存储只能建立于已获取资源并把它们存储起来前提下.
所以首次请求资源时候，这些招数无效情况下，我们可以从请求响应速度方面着手，而CDN就是在这方面提效。
CDN如何工作
举个栗子🍐：
假如我根服务器在杭州，同时在图中五个城市里都有自己可用机房。
此时北京老铁向我请求资源。
在网络带宽小、用户访问量大的情况，杭州服务器顶不住，不能快速响应。
于是我把这批资源拷贝一批放在北京机房中。
当北京老铁再次请求资源，根据就近原则找到最近的北京机房
假如有资源那就直接返回，没有的话就去杭州服务器找。
在这个过程中，北京服务器扮演CDN角色。
CDN的核心功能
缓存：指将根服务器资源拷贝一份到CDN服务器上的过程
回源：指CDN发现没有这个资源（一般是缓存的数据过期），往根服务器（或者上层服务器找）找的过程。
CDN与前端性能优化
根服务器：业务服务器，主要作用是生成动态页面或返回非纯静态页面
CND服务器：相当于仓库，存放静态资源，供给搬运。
静态资源: JS、CSS、图片等不需要业务服务器计算的资源
动态资源：需要后端实时动态生成的资源，常见又：JSP、ASP或者依赖服务端渲染得到的HTML页面
非纯静态资源：需要服务器在页面之外作额外计算的HTML页面。例如进入某网站需要权限认证确认身份。这种情况HTML是静态的，但是会和业务服务器操作耦合，这种情况就不适用于CDN服务器。
CDN的使用
静态资源具备访问频率高、承接流量大的特点。常常体现在首屏加载当中。
在许多一线大厂，CDN已经普遍应用。
比较常见是Element-ui引用问题，一般会选择全量引入，导致首屏加载速度慢
这时候可以通过CDN引用方式解决这类问题
相关教程百度一堆，我这里就不重复阐述。
CDN 优化细节
CDN的域名选址：
以淘宝首页为例:
业务服务器：[www.taobao.com](http://www.taobao.com)
CDN服务器：g.alicdn.com
明显看出，他们域名不一样，这里是个细节点：
Cookie是紧跟域名的。
即同一个域名下的所有请求，都能或者都会携带Cookie。
假如CDN服务器和业务服务器在同一个域名，那么每次请求CDN时候，都会带上cookie，这就会导致当请求数量多，例如电商行业，会造成不必要的性能开销。
所以一般我们CDN域名和业务服务器需要在不同域名下，避免不必要的性能消耗。
参考文章
《前端性能优化原理与实践》课程——CDN篇
结语
希望能给你带来帮助✨~
分享不易，点赞鼓励咯🤞
