前言
接觸到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.js https://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
- 簡書：@蠻三刀把刀
- 掘金：@蠻三刀把刀
