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

一般網(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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了記一次騰訊社招前端面試,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-12-03
- 這篇文章主要介紹了Vuex面試題匯總(推薦),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-15
- 對(duì)此本文將圍繞著初級(jí)程序員,高級(jí)程序員和架構(gòu)師這三個(gè)職位,說明下這些級(jí)別的技能瓶頸,并給出若干突破瓶頸的建議,感興趣的朋友一起看看吧2019-10-17
- 即從前端頁面的實(shí)現(xiàn),到后臺(tái)代碼的編寫,再到數(shù)據(jù)庫的管理,一人可以搞定一個(gè)公司網(wǎng)站的所有事情,真正實(shí)現(xiàn)全棧開發(fā)2019-10-13
如何進(jìn)入Web前端開發(fā)行業(yè),怎么不斷提升技能
現(xiàn)在的Web前端開發(fā)不得不說是火透了整個(gè)互聯(lián)網(wǎng),Web前端、微信、小程序似乎已經(jīng)是不得不談的未來趨勢(shì)。市場(chǎng)火證明未來缺口大,那么如何進(jìn)入Web前端開發(fā)行業(yè),怎么不斷提升2019-10-10- 程序員是一個(gè)門檻不高的職業(yè),但是優(yōu)秀程序員的門檻很高。這篇文章主要介紹了淺談程序員的能力要求與工作過程,感興趣的可以了解一下2019-10-08
- 這篇文章主要介紹了Java多線程與并發(fā)面試題(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-09-26
一篇文章看懂大數(shù)據(jù)分析就業(yè)前景及職能定位、職能要求
這篇文章主要介紹了大數(shù)據(jù)分析就業(yè)前景及職能定位、職能要求,較為詳細(xì)的分析了大數(shù)據(jù)分析了大數(shù)據(jù)分析相關(guān)概念、專業(yè)知識(shí)、行業(yè)背景、職業(yè)要求、發(fā)展前景等問題,需要的朋友2019-07-29啥是前端開發(fā)工程師必會(huì)的5種網(wǎng)頁布局方式?
作為前端開發(fā)工程師,布局方式有多種,針對(duì)不同的情況有不一樣的處理,這篇文章主要介紹了啥是前端開發(fā)工程師必會(huì)的5種網(wǎng)頁布局方式?具有一定的參考價(jià)值,感興趣的小伙伴2019-07-26Java開發(fā)者必須掌握的15個(gè)框架(20k是小問題)
這篇文章主要介紹了Java開發(fā)者必須掌握的15個(gè)框架,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-07-24