关于CDN与本地加载的选择

关于CDN与本地加载的选择

一、使用部分CDN加载echarts加载过慢原因

 在页面中引用echarts.js库时,采用的是cdn加载,首次加载页面,会向cdn服务器去请求文件,并加载,javascript是单线程语言,部分请求必须在先加载完echarts.js 后续的代码才能执行,如若此阶段请求echarts的实际时间过长,导致js部分请求延迟,导致页面加载过慢

二、CDN加载对比本地加载优缺点

 CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。
优点:

1. 浏览器从服务器上下载css、js和图片等文件时都要和服务器连接，而大部分浏览器对同一个域名用于下载文件的并发连接数限制在4个，这意味着如果要下载第五个文件就必须等前四个文件中有一个已经加载完成，假如前4个文件都很大，第五个文件就要等很久，整个网页的加载速度就受限于此了。用CDN就可以通过不同的域名来加载文件，从而使下载文件的并发连接数大大增加。
2. CDN能提供本地的数据中心，这样一来，那些远离你网站主服务器的用户也 能就近很快地下载文件
3. CDN能够分配负载，节省带宽，提高你网站的性能

缺点:

1. CDN会有出故障的时候，这时候要有备用方案，也就是你的本地文件，这种处于稳定考虑的冗余会增大开发工作量和复杂度;
2. 由于地理、法律、政策和商业上的阻隔，你所在的地区可能屏蔽了一些流行 的免费CDN服务的域名或者IP地址;
3. CDN对低流量的小网站性能提升并不明显;

三、具体问题分析

• 代码截图
  

• 浏览器瀑布图分析原因（未优化前）

  • 0-3000ms: 此阶段在加载的页面
    
  • 2.3000ms-1300ms:
    • 3000ms-9000ms:此阶段加载所有的静态资源js css png等文件
      
    • 9000ms-13000ms: 此阶段仍然在请求cdn的echarts.js文件
  • 13000ms-完成:开始请求config用户保存的查询条件后getTable2 开始获 取信息列表的数据

  综上所述: 由于echarts.js加载过慢,导致获取信息列表信息过慢,从而导致信息列表加载过慢的情况

四、使用不同的方法测试加载速度:

1. 采用本地服务器加载echarts.js和echarts.min.js（目前优化后采用的）
   
   echarts.js 大小:2.4MB 耗时:348ms
   echarts.min.js 大小:728Kb 耗时:112ms

2. 使用https://cdn.bootcss.com/echarts/3.6.2/echarts.js 节点加载
   
   大小:2.4MB 耗时:1.69s

3. 使用https://cdn.bootcss.com/echarts/3.6.2/echarts.min.js节点加载
   
   大小:208kb 耗时:54ms

4. 使用 https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.js 节点加载(5次时间对比)
   

   
   
   
   

   对比5次请求

   大小:447kb 耗时: 约为1.5s

对比上述4中情况得出目前加载过慢的原因:
现有的https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.js 节点不稳定,在政务舆情系统运行时,可能出现9s以上的请求时间(≈50kb/s),导致加载过慢,并且接口速度过慢此cdn节点速度约为298kb/s
而https://cdn.bootcss.com/echarts/3.6.2/echarts.js节点速度约为1502kb/s
解决方案: 1.更换稳定的cdn节点 2.更换速度更快的接口节点 3.选择已压缩的echars.min.js文件 4.本地加载echart静态资源

五、具体解决方案

目前已经更改采用了本地加载echarts.min.js文件；
最优方案：采用cdn更快的节点加载echarts.min.js