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

一般網(wǎng)站優(yōu)化都是優(yōu)化后臺,如接口的響應時間、SQL優(yōu)化、后臺代碼性能優(yōu)化、服務器優(yōu)化等。高并發(fā)情況下,對前端web優(yōu)化也是非常重要的。
下面說說幾種常見的優(yōu)化措施。
1、HTML CSS JS位置
一般需要將CSS放頁面最上面,即HEAD部分,而將JS代碼放頁面底部。因為頁面需要加載為CSS才進行渲染,而JS如果不是在頁面加載之前就要執(zhí)行就要放到頁面最底部,以免在頁面展示之前因JS過多加載而影響頁面渲染速度。
2、引用文件位置
有一些插件需要引用到遠程的圖片、CSS、JS、圖標等,如果遠程的資源連接網(wǎng)速不佳,如國外的某些資源,會造成網(wǎng)頁阻塞,同樣也會造成頁面展示問題,盡量能把引用遠程的資源能本地化。
3、減少后臺請求
每個請求都是耗費資源影響系統(tǒng)性能的,所以,能減少后臺請求就減少。如,盡量的將同一個資源(圖片、JS、CSS等)合并成一個文件,頁面只要請求一次即可,這樣就節(jié)省了很多http連接的開銷及往返的時間損耗。
另外一方面,如果是關于抽獎、搖一搖、秒殺等功能,可以限制發(fā)往后臺的頻率,如前端操作10次才往后端發(fā)一次請求,這樣從前端就做到了后臺的流量控制,把流量控制到訪問的最外層是最好的,盡量不要讓請求落到底層。
4、壓縮傳輸
http壓縮可以對純文本可以壓縮至原內(nèi)容的40%, 從而節(jié)省了60%的數(shù)據(jù)傳輸,GZIP是一種常用的壓縮編碼。因此,對文本類型的資源如CSS、JS、HTML啟用GZIP壓縮加速http傳輸速度。
5、減少cookie傳輸
cookie會包含在每次請求和響應中,如果cookie過多會影響http響應速度,所以高并發(fā)情況下盡量控制cookie的傳輸量,nginx對cookie傳輸默認是做了限制的。另外,像CSS、JS、圖片等靜態(tài)資源可以啟用單獨域名,禁用cookie對靜態(tài)資源的傳輸,這樣就能大大提高效率。
6、瀏覽器緩存
高并發(fā)情況下,可以將一些不怎么變動的東西緩存到瀏覽器cache中,或者一些活動內(nèi)容可以提前將內(nèi)容在客戶端緩存起來,以免活動開始大量請求涌入服務器。
7、CDN
之前的文章有講過CDN的概念,它就是一個靜態(tài)內(nèi)容分發(fā)網(wǎng)絡,本質(zhì)就是靜態(tài)資源的緩存,可以將靜態(tài)資源放到CDN上,這樣,用戶就能離自己最近的地方獲取到資源,大大提高了用戶訪問速度。
8、反向代理
常用的反向代理nginx除了負載均衡功能,它也可以通過配置緩存功能來加速請求響應速度,當用戶第一次訪問的時候靜態(tài)資源就可以被緩存到反向代理服務器上,這樣其他用戶的請求就能直接從反向代理服務器直接獲取返回,這樣也就直到了靜態(tài)資源緩存的作用。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
- 這篇文章主要介紹了記一次騰訊社招前端面試,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-12-03
- 這篇文章主要介紹了Vuex面試題匯總(推薦),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-11-15
- 對此本文將圍繞著初級程序員,高級程序員和架構師這三個職位,說明下這些級別的技能瓶頸,并給出若干突破瓶頸的建議,感興趣的朋友一起看看吧2019-10-17
- 即從前端頁面的實現(xiàn),到后臺代碼的編寫,再到數(shù)據(jù)庫的管理,一人可以搞定一個公司網(wǎng)站的所有事情,真正實現(xiàn)全棧開發(fā)2019-10-13
如何進入Web前端開發(fā)行業(yè),怎么不斷提升技能
現(xiàn)在的Web前端開發(fā)不得不說是火透了整個互聯(lián)網(wǎng),Web前端、微信、小程序似乎已經(jīng)是不得不談的未來趨勢。市場火證明未來缺口大,那么如何進入Web前端開發(fā)行業(yè),怎么不斷提升2019-10-10- 程序員是一個門檻不高的職業(yè),但是優(yōu)秀程序員的門檻很高。這篇文章主要介紹了淺談程序員的能力要求與工作過程,感興趣的可以了解一下2019-10-08
- 這篇文章主要介紹了Java多線程與并發(fā)面試題(小結),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-09-26
一篇文章看懂大數(shù)據(jù)分析就業(yè)前景及職能定位、職能要求
這篇文章主要介紹了大數(shù)據(jù)分析就業(yè)前景及職能定位、職能要求,較為詳細的分析了大數(shù)據(jù)分析了大數(shù)據(jù)分析相關概念、專業(yè)知識、行業(yè)背景、職業(yè)要求、發(fā)展前景等問題,需要的朋友2019-07-29啥是前端開發(fā)工程師必會的5種網(wǎng)頁布局方式?
作為前端開發(fā)工程師,布局方式有多種,針對不同的情況有不一樣的處理,這篇文章主要介紹了啥是前端開發(fā)工程師必會的5種網(wǎng)頁布局方式?具有一定的參考價值,感興趣的小伙伴2019-07-26Java開發(fā)者必須掌握的15個框架(20k是小問題)
這篇文章主要介紹了Java開發(fā)者必須掌握的15個框架,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-07-24