我目前是一名前端开发工程师。 主要关注前端开发、数据安全、网络爬虫、物联网、边缘估计等方向。
原创博客主要内容
前言
联系CDN的原因：
我搭建的网站网页打开速度还是比较慢。 经验证，我的网站有很多很大的静态js文件，通过浏览器读取这样的js需要很长时间。
最近有一些空闲的精力来优化加载速度。
分析思路
公共CDN加速公共js库
虽然首先想到的是使用公共CDN来加速公共js库，比如我的后端使用的是echarts、js-cookie等，这种js本来就是放在自己的服务器上的，我们可以直接让浏览器访问读取存储在公共 CDN 中的此类库。
这里使用bootcss网站提供的公共CDN。 将这个公共库指向bootcss后，这个js文件的加载速度在100ms以内：
https://cdn.bootcss.com/axios/0.18.0/axios.min.js https://cdn.bootcss.com/moment.js/2.22.2/moment.min.js
收到后，我们还剩下一些自己的js文件。 这种js打包在后端，无法通过公共CDN加速。
这是一个反例。 右图中js已经达到了1.2m。 每次在没有缓存的情况下加载这个Js，浏览器都会花费5秒以上的时间来加载。 新用户点击我的网站需要盯着空白页面已经这么久了，非常劝阻，很多用户在页面渲染完成之前就关闭了。
如右图所示，极端情况下会等待15s以上。
图像
这是完全不能接受的。
nginx 启用 gzip
收到后想到的就是压缩js文件的大小，虽然主要原因是文件太大，传输流畅。
nginx作为我的反向代理，负责我服务器的对外服务。 我们可以启用nginx的gzip功能来压缩静态文件，包括图片、js、css等。
参考：
按照上一页的教程，修改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文件，从而达到加速的疗效。
但是由于我全站开启了HTTP，所以七牛云的OSS免费配额并不是针对HTTPS请求的，这让我很头疼。 我的目的不是花钱买“免费嫖娼”资源（滑稽）。
于是，我找到了我的服务器所在的阿里云。 。 。
阿里站点CDN加速
阿里云CDN介绍：
将源站点的内容分发到距离用户最近的节点，使用户就近获取所需内容，提高用户访问的响应率和成功率。 解决由于分布、带宽、服务器性能等原因造成的访问延迟问题，适用于站点加速、点播、直播等场景。
我使用流量计费方式订购了100G流量套餐：
图像
您可以看到您以后的流量套餐：
图像
在CDN控制台添加自己的域名并写入IP，这样加速域名就可以访问你的服务器了。
图像
注册域名后，阿里云提示我们在域名解析处添加CNAME解析：
图像
阿里云提供CNAME指向的域名：
图像
我们关闭我们的A记录（指向服务器的记录），添加一条CNAME记录，指向阿里的CDN节点域名：
图像
访问我们的网站后，结果如图所示，我发现我没有使用HTTPS，所有的请求都因为强制https而难以访问。
图像
所以我们需要在阿里云控制台的CDN中添加https支持，并且需要导出您网站的https证书：
因为我的服务器在阿里云，但是证书也是阿里云免费提供https一年的，所以可以一键导出。
图像
导出完成后，再次访问网站，第一次缓慢加载后重新加载。 这次css3开启硬件加速，加载js文件只用了892ms：
图像
到目前为止，新用户访问网站时，几乎所有内容都可以在2秒内显示出来。
PS：使用CDN后，你的静态文件会缓存在阿里云的边缘节点css3开启硬件加速，所以读取的js文件大小是未压缩前的大小。 （我也这么认为，但不确定是不是真的）
替代方案：Cloudflare 免费 CDN
Cloudflare非常适合美国服务器网站的加速。 经过测试，我的阿里云服务器放在前面，加速效果不是很显着。
参考：
图像
图像
总结
