前言

接觸到CDN的起因：

我自己搭建的網(wǎng)站https://price.monitor4all.cn/網(wǎng)頁(yè)打開的速度一直比較慢，經(jīng)查證是我的網(wǎng)站有很多靜態(tài)js大文件，通過(guò)瀏覽器讀取這些js比較耗時(shí)間。

最近有了一些空余精力， 好好優(yōu)化一下加載速度。

分析思路

公用CDN加速公用js庫(kù)

其實(shí)首先想到的是把公共的js庫(kù)使用公共CDN來(lái)加速，比如我的前端用到了echarts，js-cookie等。這些js最開始是放在我自己的服務(wù)器上的，我們可以讓瀏覽器直接去讀取公共CDN里存放的這些庫(kù)。

這里使用的是bootcss網(wǎng)站提供的公共CDN，在將這些公共庫(kù)指向bootcss后，這些js文件加載速度到了100ms以內(nèi)：

https://cdn.bootcss.com/axIOS/0.18.0/axios.min.js
https://cdn.bootcss.com/moment.js/2.22.2/moment.min.js

接下來(lái)，我們還剩下一些自己的js文件，這些是前端打包后的js，不能用公用CDN來(lái)加速。

這里舉個(gè)例子，下圖中的js達(dá)到了1.2m，每次在沒有緩存的情況下加載這個(gè)Js，瀏覽器都需要5s以上的加載時(shí)間，新用戶點(diǎn)擊我的網(wǎng)站，都需要盯著空白頁(yè)這么久，十分勸退，很多用戶沒等到網(wǎng)頁(yè)渲染完畢就關(guān)了。

如下圖，極端情況下，會(huì)等到15s以上。

image

這是完全不能接受的。

Nginx啟用Gzip

接下來(lái)我想到的是將js文件大小壓縮，畢竟主要是由于文件過(guò)大，才導(dǎo)致的傳輸緩慢。

nginx作為我的反向代理，負(fù)責(zé)了我服務(wù)器對(duì)外的服務(wù)，我們可以啟用nginx的gzip功能，對(duì)靜態(tài)文件進(jìn)行壓縮，包括圖片，js，css等。

參考：

https://blog.csdn.net/bigtree_3721/article/details/79849503

按照上面網(wǎng)頁(yè)的教程，修改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文件大小減少了很多，這個(gè)1.2m的文件，在瀏覽器端只需要加載500k的壓縮js。

然而，我使用的是1m帶寬的云服務(wù)器，對(duì)于500k大小的js，有時(shí)候還是需要3-5s時(shí)間來(lái)加載，我們還需要想辦法繼續(xù)優(yōu)化。

對(duì)象存儲(chǔ)OSS

經(jīng)過(guò)一陣查找，我找到了七牛云，七牛云免費(fèi)提供10G的OSS存儲(chǔ)空間，我的想法是將這個(gè)js文件上傳上去，拿到文件的鏈接后，寫在前端html中，從OSS讀取該JS文件，從而達(dá)到加速的效果。

然而，由于我全站開啟了HTTPs，七牛云的OSS免費(fèi)額度并不針對(duì)HTTPS請(qǐng)求，讓我非常頭疼，我的宗旨就是不花錢“白嫖”資源（滑稽）。

于是，我找上了自己服務(wù)器所在的阿里云。。。

阿里全站CDN加速

阿里云的CDN介紹：

將源站內(nèi)容分發(fā)至最接近用戶的節(jié)點(diǎn)，使用戶可就近取得所需內(nèi)容，提高用戶訪問的響應(yīng)速度和成功率。解決因分布、帶寬、服務(wù)器性能帶來(lái)的訪問延遲問題，適用于站點(diǎn)加速、點(diǎn)播、直播等場(chǎng)景。

我使用流量計(jì)費(fèi)方式，購(gòu)買了100G的流量包：

image

之后可以看到自己的流量包：

image

在CDN控制臺(tái)，添加上自己的域名，寫上IP，使得加速的域名能夠訪問你的服務(wù)器。

image

登記好域名后，阿里云提示我們?nèi)ビ蛎馕龅牡胤教砑右粋€(gè)CNAME解析：

image

阿里云提供了CNAME指向的域名：

image

我們將我們的A記錄（指向服務(wù)器的記錄）關(guān)閉，添加CNAME記錄，指向阿里的CDN節(jié)點(diǎn)域名：

image

然后訪問我們的網(wǎng)站，結(jié)果如圖，我又意識(shí)到，我沒搞HTTPS，所有的請(qǐng)求由于強(qiáng)制走h(yuǎn)ttps，所以無(wú)法訪問了。

image

所以我們需要在阿里云的控制臺(tái)對(duì)CDN添加https支持，也就需要導(dǎo)入你網(wǎng)站的https證書：

由于我服務(wù)器就在阿里云，并且證書也是阿里云開的一年免費(fèi)https，所以可以一鍵導(dǎo)入進(jìn)來(lái)。

image

導(dǎo)入完成后，再次訪問網(wǎng)站，在第一次較慢的加載后，重新加載，這次只用了892ms，就加載完畢了該js文件：

image

至此，新用戶訪問網(wǎng)站幾乎可以在2s內(nèi)顯示出全部?jī)?nèi)容。

PS：用了CDN后，會(huì)在阿里云的邊緣節(jié)點(diǎn)緩存你的靜態(tài)文件，所以讀取的js文件大小是未壓縮前的大小。（這一點(diǎn)我是這么認(rèn)為的，但并不肯定正確）

其它可行方法：Cloudflare免費(fèi)CDN

Cloudflare特別適合國(guó)外服務(wù)器網(wǎng)站的加速，經(jīng)測(cè)試，我的阿里云服務(wù)器放在上面，加速效果并不是特別明顯。

參考：https://www.wn789.com/15161.html

image

image

總結(jié)

以上就是我使用的一些優(yōu)化方法，達(dá)到加速網(wǎng)站靜態(tài)文件加載的目的。

經(jīng)過(guò)這些優(yōu)化后，網(wǎng)站的加載速度從極端情況下的15s，變成了2s內(nèi)。

當(dāng)然，以上只是很小一部分方法，還有很多優(yōu)化的方式，適合不同體量的網(wǎng)站，和不同的使用場(chǎng)景，這里權(quán)當(dāng)拋磚引玉。

關(guān)注我

我目前是一名后端開發(fā)工程師。主要關(guān)注后端開發(fā)，數(shù)據(jù)安全，網(wǎng)絡(luò)爬蟲，物聯(lián)網(wǎng)，邊緣計(jì)算等方向。

微信：yangzd1102

Github：@qqxx6661

個(gè)人博客：

• CSDN：@Rude3Knife
• 知乎：@Zhendong
• 簡(jiǎn)書：@蠻三刀把刀
• 掘金：@蠻三刀把刀