前言
接觸到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以上。
這是完全不能接受的。
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的流量包：
之后可以看到自己的流量包：
在CDN控制台，添加上自己的域名，寫上IP，使得加速的域名能夠訪問你的服務器。
登記好域名后，阿里雲提示我們去域名解析的地方添加一個CNAME解析：
阿里雲提供了CNAME指向的域名：
我們將我們的A記錄（指向服務器的記錄）關閉，添加CNAME記錄，指向阿里的CDN節點域名：
然后訪問我們的網站，結果如圖，我又意識到，我沒搞HTTPS，所有的請求由於強制走https，所以無法訪問了。
所以我們需要在阿里雲的控制台對CDN添加https支持，也就需要導入你網站的https證書：
由於我服務器就在阿里雲，並且證書也是阿里雲開的一年免費https，所以可以一鍵導入進來。
導入完成后，再次訪問網站，在第一次較慢的加載后，重新加載，這次只用了892ms，就加載完畢了該js文件：
至此，新用戶訪問網站幾乎可以在2s內顯示出全部內容。
PS：用了CDN后，會在阿里雲的邊緣節點緩存你的靜態文件，所以讀取的js文件大小是未壓縮前的大小。（這一點我是這么認為的，但並不肯定正確）
其它可行方法：Cloudflare免費CDN
Cloudflare特別適合國外服務器網站的加速，經測試，我的阿里雲服務器放在上面，加速效果並不是特別明顯。
參考：https://www.wn789.com/15161.html
總結
以上就是我使用的一些優化方法，達到加速網站靜態文件加載的目的。
經過這些優化后，網站的加載速度從極端情況下的15s，變成了2s內。
當然，以上只是很小一部分方法，還有很多優化的方式，適合不同體量的網站，和不同的使用場景，這里權當拋磚引玉。
關注我
我目前是一名后端開發工程師。主要關注后端開發，數據安全，網絡爬蟲，物聯網，邊緣計算等方向。
微信：yangzd1102
Github：@qqxx6661
個人博客：
- CSDN：@Rude3Knife
- 知乎：@Zhendong
- 簡書：@蠻三刀把刀
- 掘金：@蠻三刀把刀
原創博客主要內容
- Java知識點復習全手冊
- Leetcode算法題解析
- 劍指offer算法題解析
- SpringCloud菜鳥入門實戰系列
- SpringBoot菜鳥入門實戰系列
- Python爬蟲相關技術文章
- 后端開發相關技術文章
個人公眾號：后端技術漫談
如果文章對你有幫助，不妨收藏起來並轉發給您的朋友們~