我們通常聽說(shuō)網(wǎng)站的性能有問(wèn)題。為了優(yōu)化它，所有的后端開發(fā)人員都必須加班來(lái)優(yōu)化代碼。所以前端程序員無(wú)事可做。有優(yōu)化嗎？今天，讓我們來(lái)談?wù)?strong>前端程序員的優(yōu)化點(diǎn)。三個(gè)主要方面

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

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

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

網(wǎng)站前端優(yōu)化網(wǎng)站性能的方法分析

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

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

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

使用CDN加速

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

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

反向代理

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

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

除了安全，代理服務(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要求的響應(yīng)速度降低web負(fù)載壓力的服務(wù)器。