我們通常聽(tīng)說(shuō)網(wǎng)站的性能有問(wèn)題。要優(yōu)化它，所有的后端開(kāi)發(fā)人員都要加班來(lái)優(yōu)化代碼。所以前端程序員無(wú)事可做，有沒(méi)有優(yōu)化的地方？今天，我們來(lái)談?wù)勄岸顺绦騿T的優(yōu)化。

1、 瀏覽器訪問(wèn)優(yōu)化

HTTP協(xié)議是一種無(wú)狀態(tài)的應(yīng)用層協(xié)議，意味著每個(gè)HTTP請(qǐng)求都需要建立一個(gè)通信鏈路進(jìn)行數(shù)據(jù)傳輸，而在服務(wù)器端，每個(gè)HTTP都需要啟動(dòng)一個(gè)獨(dú)立的線程進(jìn)行處理。這些通信和服務(wù)成本非常昂貴，減少HTTP請(qǐng)求的數(shù)量可以有效地提高訪問(wèn)性能。

減少HTTP請(qǐng)求的主要方法是合并CSS、Javascript和圖片。將每次訪問(wèn)所需的瀏覽器-JavaScript和CSS合并到一個(gè)文件中，這樣瀏覽器只需要一個(gè)請(qǐng)求。圖片也可以合并。多張圖片可以合并為一張。如果每張圖片都有不同的超鏈接，則可以使用CSS偏移量響應(yīng)鼠標(biāo)單擊操作并構(gòu)造不同的url。

對(duì)于一個(gè)網(wǎng)站來(lái)說(shuō)，CSS、JavaScript、logo、icon等靜態(tài)資源文件的更新頻率相對(duì)較低，幾乎每個(gè)HTTP請(qǐng)求都需要這些文件。如果將這些文件緩存在瀏覽器中，則可以大大提高性能。通過(guò)在HTTP頭中設(shè)置cache control和expires的屬性，可以設(shè)置瀏覽器緩存。緩存時(shí)間可以是幾天甚至幾個(gè)月。

服務(wù)器端的文件壓縮和瀏覽器端的文件解壓縮可以有效地減少通信傳輸?shù)臄?shù)據(jù)量。文本文件的壓縮效率可以達(dá)到80%以上，因此對(duì)Html、CSS和JavaScript文件啟用gzip壓縮可以取得更好的效果。

CSS放在頁(yè)面的頂部，JS放在頁(yè)面的底部。下載完所有CSS后，瀏覽器將呈現(xiàn)整個(gè)頁(yè)面，因此優(yōu)化的方法是將CSS放在頁(yè)面頂部，這樣瀏覽器就可以盡快下載CSS。相反，JavaScript在瀏覽器加載JavaScript后立即執(zhí)行，這可能會(huì)阻塞整個(gè)頁(yè)面，導(dǎo)致頁(yè)面顯示緩慢。因此，JavaScript放在頁(yè)面的底部。但是如果頁(yè)面解析需要JavaScript，那么將它放在底部是不合適的

2、 使用CDN加速

CDN（content distribution network，內(nèi)容分發(fā)網(wǎng)絡(luò)）的本質(zhì)仍然是一個(gè)緩存，數(shù)據(jù)被緩存在離用戶近的地方，以便用戶能夠以快的速度獲取數(shù)據(jù)。

由于CDN部署在網(wǎng)絡(luò)運(yùn)營(yíng)商的機(jī)房，網(wǎng)絡(luò)運(yùn)營(yíng)商也是終用戶的網(wǎng)絡(luò)服務(wù)提供商，因此用戶請(qǐng)求路由到達(dá)CDN服務(wù)器。當(dāng)CDN中有瀏覽器請(qǐng)求的資源時(shí)，它們直接從CDN返回到瀏覽器中，短路徑返回響應(yīng)，加快了用戶訪問(wèn)速度，降低了數(shù)據(jù)中心的負(fù)載壓力。

3、 反向代理

傳統(tǒng)的代理服務(wù)器位于瀏覽器端，代理瀏覽器向互聯(lián)網(wǎng)發(fā)送HTTP請(qǐng)求，而反向代理服務(wù)器位于網(wǎng)站機(jī)房側(cè)，代理網(wǎng)站web服務(wù)器接收HTTP請(qǐng)求。

由于傳統(tǒng)的代理服務(wù)器可以保護(hù)瀏覽器的安全，反向代理服務(wù)器也可以保護(hù)網(wǎng)站的安全。來(lái)自Internet的訪問(wèn)請(qǐng)求必須通過(guò)代理服務(wù)器，這相當(dāng)于在web服務(wù)器和可能的網(wǎng)絡(luò)攻擊之間建立了一個(gè)屏障。

除了安全性之外，代理服務(wù)器還可以通過(guò)配置緩存來(lái)加速Web請(qǐng)求。當(dāng)用戶初次訪問(wèn)靜態(tài)內(nèi)容時(shí)，靜態(tài)內(nèi)容緩存在反向代理服務(wù)器上，這樣當(dāng)其他用戶訪問(wèn)靜態(tài)內(nèi)容時(shí)，可以直接從反向代理服務(wù)器返回，加快web請(qǐng)求的響應(yīng)速度，減輕web服務(wù)器的負(fù)載壓力。