前言

接觸到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爬蟲相關技術文章
• 後端開發相關技術文章

個人公眾號：後端技術漫談

如果文章對你有幫助，不妨收藏起來並轉發給您的朋友們~