小猿圈web前端網站性能優化方案

CSS Nginx 瀏覽器 HTML SQL 小猿圈 2019-05-10

現在很多公司優化自己的產品,優化自己的頁面,就是為了更好的抓住用戶的使用習慣等等,也是為了抓住商機,那麼一般的網站需要怎麼又話呢?下面小猿圈web前端老師網站性能優化方案。

一般網站優化都是優化後臺,如接口的響應時間、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前端講師對於網站性能優化方案的介紹,想學習就不要怕苦,想改變自己的生活那就堅持下去,不要聽別人的,你是為了興趣去做的,以後興趣可以變成工作。如果工作中有任何不會的可以到小猿圈網站上去尋找答案。

小猿圈web前端網站性能優化方案

相關推薦

推薦中...