2分鐘，我把網(wǎng)站性能優(yōu)化了3倍！

　　來(lái)源丨經(jīng)授權轉自 程序員魚(yú)皮（ID：coder_yupi）

　　作者丨魚(yú)皮

　　大家好，我是魚(yú)皮，最近有同學(xué)反映我做的 面試刷題網(wǎng)站 （）頁(yè)面加載速度有點(diǎn)慢，所以我決定先簡(jiǎn)單優(yōu)化一下。

　　其實(shí)我只做了 1 件小事，花了兩分鐘左右，就把網(wǎng)站的加載速度從 5 秒左右優(yōu)化到了 1.5 秒！從時(shí)間成本和效果來(lái)看，這已經(jīng)是一個(gè)質(zhì)的飛躍了。

　　那我究竟用了什么黑科技呢？給大家簡(jiǎn)單分享一下。

　　網(wǎng)站加載速度優(yōu)化

　　我用到了兩個(gè)技術(shù)，分別是CDN和HTTP/2，這里重點(diǎn)講下前者。

　　先說(shuō)說(shuō) CDN，即內容分發(fā)網(wǎng)絡(luò )。原本，我們的網(wǎng)頁(yè)文件都是放到單個(gè)服務(wù)器（或集群）上的，來(lái)自天南地北的所有用戶(hù)都只能從這臺服務(wù)器上獲取網(wǎng)站。這樣有幾個(gè)缺點(diǎn)：

　　單個(gè)服務(wù)器壓力過(guò)大

　　如果服務(wù)器故障，所有用戶(hù)都將無(wú)法訪(fǎng)問(wèn)（單點(diǎn)故障）

　　離服務(wù)器越遠的用戶(hù)，訪(fǎng)問(wèn)速度越慢

　　而 CDN 的作用就是幫助我們把原服務(wù)器上的文件分發(fā)到多個(gè)不同地域的網(wǎng)絡(luò )節點(diǎn)上，當用戶(hù)訪(fǎng)問(wèn)網(wǎng)站時(shí)，只需要從離他們最近的節點(diǎn)獲取網(wǎng)頁(yè)文件即可（如果獲取不到，CDN 會(huì )自動(dòng)從源站拉取文件，俗稱(chēng)回源）。

　　因此，使用 CDN 可以分攤單臺服務(wù)器的負載、減少網(wǎng)站文件傳輸時(shí)間、為網(wǎng)站提升了一定的容錯能力。如果前段時(shí)間西安某程序用了 CDN，可能也不會(huì )鬧出事故了。

　　放一張對比網(wǎng)絡(luò )拓補圖，一目了然：

　　如何給網(wǎng)站開(kāi)啟 CDN 呢？我們普通人是很難自己搭建 CDN 的，一般都是使用云服務(wù)商提供的 CDN 服務(wù)。像我肯定是用騰訊云了，因為我的網(wǎng)站前后端全部放在了騰訊云上，CDN 配置更輕松、回源更快速、有問(wèn)題也相對好解決。

　　騰訊云 CDN 配置

　　通過(guò)上圖左側的列表，我們可以看到 CDN 相關(guān)的配置是非常非常多的。

　　首先要配置一個(gè) CDN 域名，一般是自己的二級域名（）再加上 cdn / static 之類(lèi)的前綴，比如：。

　　然后要給該域名配置回源地址和回源 HOST，如果 CDN 還沒(méi)有緩存你的文件，則會(huì )從該地址拉取源文件?；卦?HOST 主要是為了告訴源站你是誰(shuí)、是誰(shuí)要從我這拿文件，從而返回給你正確的資源。

　　還可以進(jìn)行訪(fǎng)問(wèn)控制，比如只允許特定自己域名的網(wǎng)頁(yè)來(lái)請求文件，從而防止文件被其它網(wǎng)站盜用，刷了你的 CDN 資源用量（扣你的錢(qián)）。

　　還可以配置 IP 訪(fǎng)問(wèn)頻率限制，可以防止單個(gè) IP 地址的用戶(hù)攻擊你的網(wǎng)站，也可以一定程度上限值流量，給自己省點(diǎn)錢(qián)。雖然 DDOS 還是防不住，但總比沒(méi)有要好。

　　IP 訪(fǎng)問(wèn)限頻

　　使用 CDN 的話(huà)，還得注意下緩存時(shí)間的設置，相對不發(fā)生變化的網(wǎng)站靜態(tài)文件，緩存時(shí)間可以設置長(cháng)一點(diǎn)。而動(dòng)態(tài)網(wǎng)頁(yè)（頁(yè)面內容動(dòng)態(tài)更新）一般不要緩存，否則用戶(hù)看到的都是同樣的內容。

　　這里建議大家每次更新網(wǎng)站靜態(tài)文件時(shí)，給文件生成一個(gè)隨機的后綴，可以防止更新網(wǎng)頁(yè)文件后 CDN 沒(méi)更新導致的用戶(hù)看不到最新頁(yè)面的問(wèn)題?，F在很多的前端框架和打包工具一般都會(huì )自動(dòng)幫你生成文件后綴了，也不用做什么額外工作，比如我用的 UMI 框架 + Webpack 打包工具，生成的文件如下：

　　除了給網(wǎng)站加速外，如今的 CDN 還推出了一些派生能力，比如：

　　不過(guò) CDN 肯定是要花費成本的，一般是按流量計費，所以建議大家上 CDN 前先思考是否有必要。比如你的網(wǎng)站前期用戶(hù)不多、或者用戶(hù)都在你服務(wù)器的機房里面關(guān)著(zhù)，那大可不必增加一筆消費了。

　　我之前沒(méi)做 CDN 主要也是考慮到前期規模小、不值得，但通過(guò)統計分析后發(fā)現，目前網(wǎng)站用戶(hù)已經(jīng)覆蓋了全國各地，還是用 CDN 好一些，給大家更好的體驗。而用了 CDN 后，我的網(wǎng)站首次加載時(shí)長(cháng)從 5 秒降到了 3 秒左右，不得不說(shuō)，真香！

　　之后，在騰訊云的 CDN 配置頁(yè)面，我很驚喜地發(fā)現了 HTTP/2 的開(kāi)關(guān)：

　　HTTP/2 作為最新的 HTTP 協(xié)議，相對于現在最廣泛應用的 HTTP 1.1，大幅提升了 Web 性能，進(jìn)一步減少了網(wǎng)絡(luò )延遲。

　　HTTP/2 的水可是很深的，什么特么二進(jìn)制、多路復用、數據流、服務(wù)器主推，我是看一遍頭疼一遍，后面再單獨出篇文章給大家講講吧?，F在直接用起來(lái)，快就完事！