CDN在前端开发的作用

CDN 内容分发网络：content delivery network

概况：设置多个节点服务器，分布在不同区域中，便于用户进行数据传递和访问。当某一个节点出现问题时，通过其他节点仍然可以完成数据传输工作，可以提高用户访问网站的响应速度。

“分布式存储”：将中心平台的内容分发到各地的边缘服务器，使用户能够就近获取所需内容，降低网络用时，提高用户访问响应速度和命中率。利用了索引、缓存等技术。

“负载均衡”：对所有发送的请求进行访问调度，确定提供给用户的最终实际访问地址。

“内容管理”：负责对存储内容的监管、数据分析等。

为什么要用CDN?

浏览器从服务器上下载CSS、js和图片等文件时都要和服务器连接，而大部分服务器的带宽有限，如果超过限制，网页就半天反应不过来。而CDN可以通过不同的域名来加载文件，从而使下载文件的并发连接数大大增加。
jquery一类的库文件被广泛使用，如果访问你网站的用户的浏览器之前在访问别的网站时通过和你相同的CDN已经加载了jquery，由于该文件已经被缓存了，就不用重新下载了。
CDN具有更好的可用性，更低的网络延迟和丢包率。
CDN能提供本地的数据中心，这样一来，那些远离你网站主服务器的用户也能就近很快地下载文件。
很多商业付费的CDN能提供使用报告，这可以作为你自己网站分析报告的补充。
CDN能够分配负载，节省带宽，提高你网站的性能，降低网站托管的成本，通常是免费的。

CDN的不足

在开发阶段如果处在断网环境下，CDN文件是无法加载的。
不够灵活。比如你只使用jquery库的一小部分，如果使用CDN上提供的文件就没办法进行拆分，还是得下载原来的大小，反而没有自己拆分后加载速度来得快。
尽管一些流行的CDN文件事先缓存过的几率较大，但并不是一定的，一些移动设备的缓存可能很小而且效率很低，CDN的优势就不明显了，特别是当你可以在本地服务器上存放比CDN文件更小的文件时。
由于地理、法律、政策和商业上的阻隔，你所在的地区可能屏蔽了一些流行的免费CDN服务的域名或者IP地址。
CDN会有出故障的时候，这时候要有备用方案，也就是你的本地文件，这种处于稳定考虑的冗余会增大开发工作量和复杂度。
如果安全性对你的网站很重要，就不要使用公共的CDN，因为当你远程从CDN请求文件时，你的访问来源信息也被发送过去，一些远程的js文件可能被修改用来搜集你的用户或者系统信息，而当你使用https协议时，能选择的CDN就更加有限。

传统网站的访问过程：

用户在自己的浏览器中输入要访问的网站域名。
浏览器向本地DNS服务器请求对该域名的解析。
本地DNS服务器中如果缓存有这个域名的解析结果，则直接响应用户的解析请求。
本地DNS服务器中如果没有关于这个域名的解析结果的缓存，则以递归方式向整个DNS系统请求解析，获得应答后将结果反馈给浏览器。
浏览器得到域名解析结果，就是该域名相应的服务设备的IP地址。
浏览器向服务器请求内容。
服务器将用户请求内容传送给浏览器。

加入CDN后的访问过程

当用户点击网站页面上的内容URL，经过本地DNS系统解析，DNS系统会最终将域名的解析权交给CNAME指向的CDN专用DNS服务器。
CDN的DNS服务器将CDN的全局负载均衡设备IP地址返回用户。
用户向CDN的全局负载均衡设备发起内容URL访问请求。
CDN全局负载均衡设备根据用户IP地址，以及用户请求的内容URL，选择一台用户所属区域的区域负载均衡设备，告诉用户向这台设备发起请求。
区域负载均衡设备会为用户选择一台合适的缓存服务器提供服务，选择的依据包括：根据用户IP地址，判断哪一台服务器距用户最近；根据用户所请求的URL中携带的内容名称，判断哪一台服务器上有用户所需内容；查询各个服务器当前的负载情况，判断哪一台服务器尚有服务能力。基于以上这些条件的综合分析之后，区域负载均衡设备会向全局负载均衡设备返回一台缓存服务器的IP地址。
全局负载均衡设备把服务器的IP地址返回给用户。
用户向缓存服务器发起请求，缓存服务器响应用户请求，将用户所需内容传送到用户终端。

前端工作中怎样根据CDN优化网站性能？

1.前端的文件分为静态文件和动态文件：对于静态文件（img-css-video）占用资源较大，这部分文件基本保持不变，可以使用CDN进行加速；对于JS文件（jquery）不同网站使用多，可以使用CDN进行加速。对于静态html界面，如果纯静态界面可以使用CDN加速。如果涉及jsp动态界面直接从源服务器获取文件比较好。

动态页面：当收到用户请求时服务器会在服务端对页面进行一次后台渲染把数据渲染到页面之后再返回给用户（当然，服务端也可以做缓存）。

动态页面是不适合做cdn加速的。原因：参照上面讲的cdn工作原理，由于页面是动态的，内容的有效期就比较活跃。假如我们对动态页面做了cdn加速，那么场景应该是这样的：用户——>边缘节点（验证有效期发现失效）——>源站。经过这个过程才能拿到页面，这样并没有起到加速的作用反而更慢了，那我们还不如直接去源站拿(当然我们可以要求cdn厂商做定制化开发)。

静态页面：收到用户请求时，服务端不做渲染工作直接返回给用户。

2.浏览器对同一ip进行请求的最大并发连接数。不同浏览器的并发数量不一样：IE11 、IE10 、chrome、Firefox 的并发连接数是 6个，IE9是10个。

如果页面静态资源（图片等）过多（大于6个）会存在资源请求等待的情况。目前现实状况是大多用户带宽越来越大，但是咱们的静态资源并非那么大，很多文件都是几k或者几十k，6个文件加起来都小于带宽。这样就导致了资源的浪费。解决方案是：用多个不同IP的服务器来存储这些文件，并在页面中通过绝对路径的方式引用（要求同一IP的文件不超过6个）。这样就可以尽可能的减少资源请求等待的情况。

参考资料

https://baike.baidu.com/item/CDN/420951?fr=aladdin

https://cloud.tencent.com/document/product/228/3149

https://en.wikipedia.org/wiki/Content_delivery_network

https://segmentfault.com/a/1190000007962943 https://blog.csdn.net/u010400084/article/details/52925597

CDN在前端开发中的作用