現在前端不僅要能做出一個網站頁面,還要把這個頁面做的炫酷,那需要很大程度的優化,那么怎么優化才更好呢?小猿圈總結了一下自己優化的方案,感興趣的朋友可以看一下。
一般網站優化都是優化后臺,如接口的響應時間、SQL優化、后臺代碼性能優化、服務器優化等。高并發情況下,對前端web優化也是非常重要的。
下面說說幾種常見的優化措施。
1、HTML CSS JS位置
一般需要將CSS放頁面最上面,即HEAD部分,而將JS代碼放頁面底部。因為頁面需要加載為CSS才進行渲染,而JS如果不是在頁面加載之前就要執行就要放到頁面最底部,以免在頁面展示之前因JS過多加載而影響頁面渲染速度。
2、引用文件位置
有一些插件需要引用到遠程的圖片、CSS、JS、圖標等,如果遠程的資源連接網速不佳,如國外的某些資源,會造成網頁阻塞,同樣也會造成頁面展示問題,盡量能把引用遠程的資源能本地化。
3、減少后臺請求
每個請求都是耗費資源影響系統性能的,所以,能減少后臺請求就減少。如,盡量的將同一個資源(圖片、JS、CSS等)合并成一個文件,頁面只要請求一次即可,這樣就節省了很多http連接的開銷及往返的時間損耗。
另外一方面,如果是關于抽獎、搖一搖、秒殺等功能,可以限制發往后臺的頻率,如前端操作10次才往后端發一次請求,這樣從前端就做到了后臺的流量控制,把流量控制到訪問的最外層是最好的,盡量不要讓請求落到底層。
4、壓縮傳輸
http壓縮可以對純文本可以壓縮至原內容的40%, 從而節省了60%的數據傳輸,GZIP是一種常用的壓縮編碼。因此,對文本類型的資源如CSS、JS、HTML啟用GZIP壓縮加速http傳輸速度。
5、減少cookie傳輸
cookie會包含在每次請求和響應中,如果cookie過多會影響http響應速度,所以高并發情況下盡量控制cookie的傳輸量,nginx對cookie傳輸默認是做了限制的。另外,像CSS、JS、圖片等靜態資源可以啟用單獨域名,禁用cookie對靜態資源的傳輸,這樣就能大大提高效率。
6、瀏覽器緩存
高并發情況下,可以將一些不怎么變動的東西緩存到瀏覽器cache中,或者一些活動內容可以提前將內容在客戶端緩存起來,以免活動開始大量請求涌入服務器。
7、CDN
之前的文章有講過CDN的概念,它就是一個靜態內容分發網絡,本質就是靜態資源的緩存,可以將靜態資源放到CDN上,這樣,用戶就能離自己最近的地方獲取到資源,大大提高了用戶訪問速度。
8、反向代理
常用的反向代理nginx除了負載均衡功能,它也可以通過配置緩存功能來加速請求響應速度,當用戶第一次訪問的時候靜態資源就可以被緩存到反向代理服務器上,這樣其他用戶的請求就能直接從反向代理服務器直接獲取返回,這樣也就直到了靜態資源緩存的作用。
以上是小猿圈web前端講師對于網站性能優化方案的介紹,大家學到了嗎?當然大家可以在學習過程中加一點自己工作的經驗,估計會有更好的優化方案,希望大家能做出更酷的頁面。