8條關(guān)于Web前端性能的優(yōu)化建議(小結(jié))

發(fā)布時(shí)間：2019-07-15 16:19:00 作者：前端項(xiàng)目部

一般網(wǎng)站優(yōu)化都是優(yōu)化后臺(tái)，如接口的響應(yīng)時(shí)間、SQL優(yōu)化、后臺(tái)代碼性能優(yōu)化、服務(wù)器優(yōu)化等，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

一般網(wǎng)站優(yōu)化都是優(yōu)化后臺(tái)，如接口的響應(yīng)時(shí)間、SQL優(yōu)化、后臺(tái)代碼性能優(yōu)化、服務(wù)器優(yōu)化等。高并發(fā)情況下，對(duì)前端web優(yōu)化也是非常重要的。

下面說說幾種常見的優(yōu)化措施。

1、HTML CSS JS位置

一般需要將CSS放頁面最上面，即HEAD部分，而將JS代碼放頁面底部。因?yàn)轫撁嫘枰虞d為CSS才進(jìn)行渲染，而JS如果不是在頁面加載之前就要執(zhí)行就要放到頁面最底部，以免在頁面展示之前因JS過多加載而影響頁面渲染速度。

2、引用文件位置

有一些插件需要引用到遠(yuǎn)程的圖片、CSS、JS、圖標(biāo)等，如果遠(yuǎn)程的資源連接網(wǎng)速不佳，如國(guó)外的某些資源，會(huì)造成網(wǎng)頁阻塞，同樣也會(huì)造成頁面展示問題，盡量能把引用遠(yuǎn)程的資源能本地化。

3、減少后臺(tái)請(qǐng)求

每個(gè)請(qǐng)求都是耗費(fèi)資源影響系統(tǒng)性能的，所以，能減少后臺(tái)請(qǐng)求就減少。如，盡量的將同一個(gè)資源（圖片、JS、CSS等）合并成一個(gè)文件，頁面只要請(qǐng)求一次即可，這樣就節(jié)省了很多http連接的開銷及往返的時(shí)間損耗。

另外一方面，如果是關(guān)于抽獎(jiǎng)、搖一搖、秒殺等功能，可以限制發(fā)往后臺(tái)的頻率，如前端操作10次才往后端發(fā)一次請(qǐng)求，這樣從前端就做到了后臺(tái)的流量控制，把流量控制到訪問的最外層是最好的，盡量不要讓請(qǐng)求落到底層。

4、壓縮傳輸

http壓縮可以對(duì)純文本可以壓縮至原內(nèi)容的40%, 從而節(jié)省了60%的數(shù)據(jù)傳輸，GZIP是一種常用的壓縮編碼。因此，對(duì)文本類型的資源如CSS、JS、HTML啟用GZIP壓縮加速http傳輸速度。

5、減少cookie傳輸

cookie會(huì)包含在每次請(qǐng)求和響應(yīng)中，如果cookie過多會(huì)影響http響應(yīng)速度，所以高并發(fā)情況下盡量控制cookie的傳輸量，nginx對(duì)cookie傳輸默認(rèn)是做了限制的。另外，像CSS、JS、圖片等靜態(tài)資源可以啟用單獨(dú)域名，禁用cookie對(duì)靜態(tài)資源的傳輸，這樣就能大大提高效率。

6、瀏覽器緩存

高并發(fā)情況下，可以將一些不怎么變動(dòng)的東西緩存到瀏覽器cache中，或者一些活動(dòng)內(nèi)容可以提前將內(nèi)容在客戶端緩存起來，以免活動(dòng)開始大量請(qǐng)求涌入服務(wù)器。

7、CDN

之前的文章有講過CDN的概念，它就是一個(gè)靜態(tài)內(nèi)容分發(fā)網(wǎng)絡(luò)，本質(zhì)就是靜態(tài)資源的緩存，可以將靜態(tài)資源放到CDN上，這樣，用戶就能離自己最近的地方獲取到資源，大大提高了用戶訪問速度。

8、反向代理

常用的反向代理nginx除了負(fù)載均衡功能，它也可以通過配置緩存功能來加速請(qǐng)求響應(yīng)速度，當(dāng)用戶第一次訪問的時(shí)候靜態(tài)資源就可以被緩存到反向代理服務(wù)器上，這樣其他用戶的請(qǐng)求就能直接從反向代理服務(wù)器直接獲取返回，這樣也就直到了靜態(tài)資源緩存的作用。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。