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

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

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

關(guān)于面試刷題網(wǎng)站的介紹

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

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

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

單個服務(wù)器壓力過大

如果服務(wù)器故障，所有用戶都將無法訪問（單點故障）

離服務(wù)器越遠的用戶，訪問速度越慢

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

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

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

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

騰訊云 CDN 配置

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

首先要配置一個 CDN 域名，一般是自己的二級域名（xxx.com）再加上 cdn / static 之類的前綴，比如：cdn.yupi.com。

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

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

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

IP 訪問限頻

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

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

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

• DCDN：全站加速，不僅能加速靜態(tài)資源，還能通過路由優(yōu)化來加速動態(tài)內(nèi)容。適用于實時性要求比較高的動態(tài)數(shù)據(jù)，可以給接口加速哦~（理解不了的話就想想家里的梯子 🪜）

• SCDN：安全加速，給 CDN 加上一層防護能力，應(yīng)對 DDOS、CC 等攻擊。

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

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

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

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

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

開啟 HTTP/2 后，我的網(wǎng)站加載速度直接從 3 秒提升到了 1.5 秒左右，如果不是有一些圖片資源，還能更快！

以上就是本期分享，如果大家喜歡實踐類的知識分享，求點個 贊 + 在看 吧，感謝大家 ??

關(guān)注魚皮的面試鴨，就能一鍵使用刷題網(wǎng)站啦：

往期推薦

編程導(dǎo)航出新專欄啦！

剛看到份百萬閱讀的學(xué)習(xí)路線，太牛逼！

我爆肝 1 個月的新項目上線啦！

我一直在用的良心軟件，限時送 50 個會員！

離開學(xué)校后，我才明白

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的2分钟，我把网站性能优化了3倍！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。