網(wǎng)站加載優(yōu)化的過程（主要針對靜態(tài)資源），思路可以借鑒一下！

前言

接觸到CDN的起因：

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

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

分析思路公用CDN加速公用js庫

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

這里使用的是網(wǎng)站提供的公共CDN，在將這些公共庫指向后，這些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

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

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

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

這是完全不能接受的。

Nginx啟用Gzip

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

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

參考：

按照上面網(wǎng)頁的教程，修改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ù)器，對于500k大小的js，有時(shí)候還是需要3-5s時(shí)間來加載，我們還需要想辦法繼續(xù)優(yōu)化。

對象存儲OSS

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

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

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

阿里全站CDN加速

阿里云的CDN介紹：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

參考：

總結(jié)