2分鐘，我把網(wǎng)站性能優(yōu)化了3倍！
大家好，我是魚皮，最近有同學(xué)反映我做的 面試刷題網(wǎng)站 （mianshiya.com）頁面加載速度有點(diǎn)慢，所以我決定先簡單優(yōu)化一下。
其實(shí)我只做了 1 件小事，花了兩分鐘左右，就把網(wǎng)站的加載速度從 5 秒左右優(yōu)化到了 1.5 秒！從時(shí)間成本和效果來看，這已經(jīng)是一個(gè)質(zhì)的飛躍了。
那我究竟用了什么黑科技呢？給大家簡單分享一下。
網(wǎng)站加載速度優(yōu)化
我用到了兩個(gè)技術(shù)，分別是 CDN 和 HTTP/2 ，這里重點(diǎn)講下前者。
先說說 CDN，即內(nèi)容分發(fā)網(wǎng)絡(luò)。原本，我們的網(wǎng)頁文件都是放到單個(gè)服務(wù)器（或集群）上的，來自天南地北的所有用戶都只能從這臺(tái)服務(wù)器上獲取網(wǎng)站。這樣有幾個(gè)缺點(diǎn)：
單個(gè)服務(wù)器壓力過大
如果服務(wù)器故障，所有用戶都將無法訪問（單點(diǎn)故障）
離服務(wù)器越遠(yuǎn)的用戶，訪問速度越慢
而 CDN 的作用就是幫助我們把原服務(wù)器上的文件分發(fā)到多個(gè)不同地域的網(wǎng)絡(luò)節(jié)點(diǎn)上，當(dāng)用戶訪問網(wǎng)站時(shí)，只需要從離他們最近的節(jié)點(diǎn)獲取網(wǎng)頁文件即可（如果獲取不到，CDN 會(huì)自動(dòng)從源站拉取文件，俗稱 回源 ）。
因此，使用 CDN 可以分?jǐn)倖闻_(tái)服務(wù)器的負(fù)載、減少網(wǎng)站文件傳輸時(shí)間、為網(wǎng)站提升了一定的容錯(cuò)能力。如果前段時(shí)間西安某程序用了 CDN，可能也不會(huì)鬧出事故了。
放一張對(duì)比網(wǎng)絡(luò)拓補(bǔ)圖，一目了然：
如何給網(wǎng)站開啟 CDN 呢？我們普通人是很難自己搭建 CDN 的，一般都是使用云服務(wù)商提供的 CDN 服務(wù)。像我肯定是用騰訊云了，因?yàn)槲业木W(wǎng)站前后端全部放在了騰訊云上，CDN 配置更輕松、回源更快速、有問題也相對(duì)好解決。
通過上圖左側(cè)的列表，我們可以看到 CDN 相關(guān)的配置是非常非常多的。
首先要配置一個(gè) CDN 域名，一般是自己的二級(jí)域名（xxx.com）再加上 cdn / static 之類的前綴，比如：cdn.yupi.com。
然后要給該域名配置 回源地址 和 回源 HOST ，如果 CDN 還沒有緩存你的文件，則會(huì)從該地址拉取源文件。回源 HOST 主要是為了告訴源站你是誰、是誰要從我這拿文件，從而返回給你正確的資源。
還可以進(jìn)行訪問控制，比如只允許特定自己域名的網(wǎng)頁來請(qǐng)求文件，從而防止文件被其它網(wǎng)站盜用，刷了你的 CDN 資源用量（扣你的錢）。
還可以配置 IP 訪問頻率限制，可以防止單個(gè) IP 地址的用戶攻擊你的網(wǎng)站，也可以一定程度上限值流量，給自己省點(diǎn)錢。雖然 DDOS 還是防不住，但總比沒有要好。
使用 CDN 的話，還得注意下緩存時(shí)間的設(shè)置，相對(duì)不發(fā)生變化的網(wǎng)站靜態(tài)文件，緩存時(shí)間可以設(shè)置長一點(diǎn)。而動(dòng)態(tài)網(wǎng)頁（頁面內(nèi)容動(dòng)態(tài)更新）一般不要緩存，否則用戶看到的都是同樣的內(nèi)容。
這里建議大家每次更新網(wǎng)站靜態(tài)文件時(shí)，給文件生成一個(gè)隨機(jī)的后綴，可以防止更新網(wǎng)頁文件后 CDN 沒更新導(dǎo)致的用戶看不到最新頁面的問題。現(xiàn)在很多的前端框架和打包工具一般都會(huì)自動(dòng)幫你生成文件后綴了，也不用做什么額外工作，比如我用的 UMI 框架 + Webpack 打包工具，生成的文件如下：
除了給網(wǎng)站加速外，如今的 CDN 還推出了一些派生能力，比如：
DCDN：全站加速，不僅能加速靜態(tài)資源，還能通過路由優(yōu)化來加速動(dòng)態(tài)內(nèi)容。適用于實(shí)時(shí)性要求比較高的動(dòng)態(tài)數(shù)據(jù)，可以給接口加速哦~（理解不了的話就想想家里的梯子 ??）
SCDN：安全加速，給 CDN 加上一層防護(hù)能力，應(yīng)對(duì) DDOS、CC 等攻擊。
不過 CDN 肯定是要花費(fèi)成本的，一般是按流量計(jì)費(fèi)，所以建議大家上 CDN 前先思考是否有必要。比如你的網(wǎng)站前期用戶不多、或者用戶都在你服務(wù)器的機(jī)房里面關(guān)著，那大可不必增加一筆消費(fèi)了。
我之前沒做 CDN 主要也是考慮到前期規(guī)模小、不值得，但通過統(tǒng)計(jì)分析后發(fā)現(xiàn)，目前網(wǎng)站用戶已經(jīng)覆蓋了全國各地，還是用 CDN 好一些，給大家更好的體驗(yàn)。而用了 CDN 后，我的網(wǎng)站首次加載時(shí)長從 5 秒降到了 3 秒左右，不得不說，真香！
之后，在騰訊云的 CDN 配置頁面，我很驚喜地發(fā)現(xiàn)了 HTTP/2 的開關(guān)：
HTTP/2 作為最新的 HTTP 協(xié)議，相對(duì)于現(xiàn)在最廣泛應(yīng)用的 HTTP 1.1，大幅提升了 Web 性能，進(jìn)一步減少了網(wǎng)絡(luò)延遲。
HTTP/2 的水可是很深的，什么特么二進(jìn)制、多路復(fù)用、數(shù)據(jù)流、服務(wù)器主推，我是看一遍頭疼一遍，后面再單獨(dú)出篇文章給大家講講吧。現(xiàn)在直接用起來，快就完事！
開啟 HTTP/2 后，我的網(wǎng)站加載速度直接從 3 秒提升到了 1.5 秒左右，如果不是有一些圖片資源，還能更快！
以上就是本期分享，如果大家喜歡實(shí)踐類的知識(shí)分享，求點(diǎn)個(gè) 贊 + 在看 吧，感謝大家 ??
關(guān)注魚皮的面試鴨，就能一鍵使用刷題網(wǎng)站啦：
往期推薦