我目前是一名后端开拓工程师。紧张关注后端开拓，数据安全，网络爬虫，物联网，边缘打算等方向。
原创博客紧张内容
Java知识点复习全手册Leetcode算法题解析剑指offer算法题解析SpringCloud菜鸟入门实战系列SpringBoot菜鸟入门实战系列Python爬虫干系技能文章后端开拓干系技能文章
打仗到CDN的起因：
我自己搭建的网站https://price.monitor4all.cn/网页打开的速率一贯比较慢，经查证是我的网站有很多静态js大文件，通过浏览器读取这些js比较耗韶光。
最近有了一些空余精力， 好好优化一下加载速率。
剖析思路公用CDN加速公用js库
实在首先想到的是把公共的js库利用公共CDN来加速，比如我的前端用到了echarts，js-cookie等。这些js最开始是放在我自己的做事器上的，我们可以让浏览器直接去读取公共CDN里存放的这些库。
这里利用的是bootcss网站供应的公共CDN，在将这些公共库指向bootcss后，这些js文件加载速率到了100ms以内：
https://cdn.bootcss.com/axios/0.18.0/axios.min.jshttps://cdn.bootcss.com/moment.js/2.22.2/moment.min.js
接下来，我们还剩下一些自己的js文件，这些是前端打包后的js，不能用公用CDN来加速。
这里举个例子，下图中的js达到了1.2m，每次在没有缓存的情形下加载这个Js，浏览器都须要5s以上的加载韶光，新用户点击我的网站，都须要盯着空缺页这么久，十分劝退，很多用户没等到网页渲染完毕就关了。
如下图，极度情形下，会等到15s以上。
image
这是完备不能接管的。
Nginx启用Gzip
接下来我想到的是将js文件大小压缩，毕竟紧张是由于文件过大，才导致的传输缓慢。
nginx作为我的反向代理，卖力了我做事器对外的做事，我们可以启用nginx的gzip功能，对静态文件进行压缩，包括图片，js，css等。
参考：
https://blog.csdn.net/bigtree_3721/article/details/79849503
按照上面网页的教程，修正nginx的conf。
gzip on; gzip_min_length 1k; gzip_buffers 4 16k; #gzip_http_version 1.0; gzip_comp_level 2; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary off; gzip_disable \"大众MSIE [1-6]\.\"大众;
压缩后，js文件大小减少了很多，这个1.2m的文件，在浏览器端只须要加载500k的压缩js。
然而，我利用的是1m带宽的云做事器，对付500k大小的js，有时候还是须要3-5s韶光来加载，我们还须要想办法连续优化。
工具存储OSS
经由一阵查找，我找到了七牛云，七牛云免费供应10G的OSS存储空间，我的想法是将这个js文件上传上去，拿到文件的链接后，写在前端html中，从OSS读取该JS文件，从而达到加速的效果。
然而，由于我全站开启了HTTPs，七牛云的OSS免费额度并不针对HTTPS要求，让我非常头疼，我的宗旨便是不费钱“白嫖”资源（风趣）。
于是，我找上了自己做事器所在的阿里云。。。
阿里全站CDN加速
阿里云的CDN先容：
将源站内容分发至最靠近用户的节点，利用户可就近取得所需内容，提高用户访问的相应速率和成功率。办理因分布、带宽、做事器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。
我利用流量计费办法，购买了100G的流量包：
image
之后可以看到自己的流量包：
image
在CDN掌握台，添加上自己的域名，写上IP，使得加速的域名能够访问你的做事器。
image
登记好域名后，阿里云提示我们去域名解析的地方添加一个CNAME解析：
image
阿里云供应了CNAME指向的域名：
image
我们将我们的A记录（指向做事器的记录）关闭，添加CNAME记录，指向阿里的CDN节点域名：
image
然后访问我们的网站，结果如图，我又意识到，我没搞HTTPS，所有的要求由于逼迫走https，以是无法访问了。
image
以是我们须要在阿里云的掌握台对CDN添加https支持，也就须要导入你网站的https证书：
由于我做事器就在阿里云，并且证书也是阿里云开的一年免费https，以是可以一键导入进来。
image
导入完成后，再次访问网站，在第一次较慢的加载后，重新加载，这次只用了892ms，就加载完毕了该js文件：
image
至此，新用户访问网站险些可以在2s内显示出全部内容。
PS：用了CDN后，会在阿里云的边缘节点缓存你的静态文件，以是读取的js文件大小是未压缩前的大小。（这一点我是这么认为的，但并不肯定精确）
其它可行方法：Cloudflare免费CDN
Cloudflare特殊适宜国外做事器网站的加速，经测试，我的阿里云做事器放在上面，加速效果并不是特殊明显。
参考：https://www.wn789.com/15161.html
image
image
总结以上便是我利用的一些优化方法，达到加速网站静态文件加载的目的。
经由这些优化后，网站的加载速率从极度情形下的15s，变成了2s内。
当然，以上只是很小一部分方法，还有很多优化的办法，适宜不同体量的网站，和不同的利用场景，这里权当抛砖引玉。
关注我我目前是一名后端开拓工程师。紧张关注后端开拓，数据安全，网络爬虫，物联网，边缘打算等方向。
微信：yangzd1102
Github：@qqxx6661
个人博客：
CSDN：@Rude3Knife知乎：@Zhendong简书：@蛮三刀把刀掘金：@蛮三刀把刀原创博客紧张内容
Java知识点复习全手册Leetcode算法题解析剑指offer算法题解析SpringCloud菜鸟入门实战系列SpringBoot菜鸟入门实战系列Python爬虫干系技能文章后端开拓干系技能文章如果文章对你有帮助，不妨收藏起来并转发给您的朋友们~
