性能優化——Web前端性能優化

核心知識點：

1.排查網站性能瓶頸的手法：分析各個環節的日誌，找出異常部分

2.Web前端：網站業務邏輯以前的部分（瀏覽器、圖片服務、CDN）

3.優化手段

1）瀏覽器優化

（1）減小http請求

　　a.http請求的開銷：創建通訊鏈路、進行數據傳輸、，同時要啓動獨立的線程去處理。

　　b.減小http的手段：合併CSS、合併JavaScript，合併圖片，這樣瀏覽器就只有一次請求。

（2）使用瀏覽器緩存

　　a.將靜態資源緩存到客戶瀏覽器上，

　　b.更新時是生成新的JavaScript文件，並更改html中的引用。

　　c.逐量更新

（3）啓用壓縮

　　a.服務端壓縮，客戶端解壓縮，減小數據傳輸

　　b.可能會消耗部分資源

（4）通常將JavaScript放在文件下層，CSS放在文件上層，由於JavaScript可能形成阻塞

（5）減小Cookie傳輸

　　a.對於靜態文件使用Cookie沒有意義，Cookie會影響數據傳輸，可以使用獨立域名減小Cookie傳輸

 

2）CDN

（1）最快返回響應，加快訪問速度，減輕網站壓力。

（2）通常緩存：CSS、文件、Script腳本、網頁等

 

3）反向代理

（1）安全

（2）能夠做爲緩存服務器，加快訪問速度

（3）可實現負載均衡實現高可用

 

 

 

若是性能測試結果不能知足性能或業務需求，那麼就要尋找系統瓶頸，分而治之，逐步優化。

 

大型網站結構複雜，用戶從瀏覽器發出請求直到數據庫完成操做事務，中間須要通過不少環節，

若是測試或者用戶報告網站響應緩慢，存在性能問題，必須對請求經歷的各個環節進行分析，

排查可能出現性能瓶頸的地方，定位問題。

 

排查一個網站的性能瓶頸和排查一個程序的性能瓶頸的手法基本相同：

檢查請求的各個環節的日誌，分析哪一個環節響應時間不合理、超過預期；

而後檢查監控數據，分析影響性能的主要因素是內存、磁盤、網絡、仍是CPU或是代碼問題，

或者是架構設計不合理，或是系統資源確實不足。

 

定位產品性能的具體緣由後，就須要進行性能優化，根據網站分層架構，可分爲Web前端性能優化、服務器性能優化、存儲服務器性能優化3各方面。

後面會分別闡述性能的優化手段，首先闡述Web前端性能優化。

 

通常來講Web前端指網站業務邏輯以前的部分，包括瀏覽器加載、網站視圖模型、圖片服務、CDN服務等，主要優化手段有優化瀏覽器訪問、使用反向代理、CDN等。

1.瀏覽器優化

（1）減小http請求

http協議是無狀態的應用層協議，意味着每次HTTP請求都須要創建通訊鏈路、進行數據傳輸，

而在服務端，每一個HTTP都須要啓動獨立的線程去處理。

這些通訊和服務的開銷都很昂貴，減小http請求的數目可有效提升訪問性能。

 

減小http的主要手段是合併CSS、合併JavaScript、合併圖片。

將瀏覽器一次訪問須要的JavaScript、CSS合併成一個文件，這樣瀏覽器只須要一次請求。

圖片也能夠合併，多張圖片合併成一張，若是每張圖片都有不一樣的超連接，可經過CSS偏移響應鼠標點擊操做，構造不一樣的URL。

 

（2）使用瀏覽器緩存

對一個網站而言，CSS、JavaScript、Logo、這些靜態資源文件更新的頻率都比較低，

而這些文件又幾乎是每次http請求都須要的，若是將這些文件緩存在瀏覽器中，能夠極好的改善性能。

經過設置http頭中Cache-Control和Expires的屬性，可設定瀏覽器緩存，緩存時間能夠是數天，甚至是幾個月。

 

在某些時候，靜態資源文件變化須要及時應用到客戶端瀏覽器，這種狀況可經過改變文件名來實現，

即更新JavaScript文件並非更新JavaScript文件內容，而是生成一個新的JS文件並更新HTML文件中的引用。

 

使用瀏覽器緩存策略的網站在更新靜態資源時，應採用逐量更新的方法，

好比須要更新10個圖標文件，不宜把10個文件一次所有更新，而是應一個文件一個文件逐步更新，

並有必定的間隔時間，以避免用戶瀏覽器忽然大量緩存失效，集中更新緩存，形成服務器負載驟增、網絡堵塞的狀況。

 

（3）啓用壓縮

在服務端對文件進行壓縮，在瀏覽器對文件解壓縮，可有效減小通訊傳輸的數據量。

文本文件的壓縮效率可達80%以上，所以HTML、CSS、JavaScript文件啓用GZip壓縮可達到較好的效果。

可是壓縮對瀏覽器和服務器會產生必定的壓力，在通訊帶寬良好，而服務器資源不足的狀況下要權衡考慮。

 

（4）CSS放在頁面最上面、JavaScript放在頁面最下面

瀏覽器會在下載徹底部CSS以後纔對整個頁面進行渲染，所以最好的作法就是將CSS放在頁面最上面，讓瀏覽器儘快下載CSS。

JavaScript則相反，瀏覽器在加載JavaScript後當即執行，有可能會阻塞整個頁面，形成頁面顯示緩慢，所以JavaScript最好放在頁面最下面。

但若是頁面解析時就須要用到JavaScript，這時放在底部就不合適了。

 

（5）減小Cookie傳輸

一方面，Cookie包含在每次請求和響應中，太大的Coookie會嚴重影響數據傳輸，

所以哪些數據數據須要寫入Cookie須要慎重考慮，儘可能減小Cookie中傳輸的數據量。

另外一方面，對於某些靜態資源的訪問，如CSS、Script等，發送Cookie沒有意義，

能夠考慮靜態資源使用獨立域名訪問，避免請求靜態資源時發送Cookie，減小Cookie傳輸次數。

 

2.CDN加速

CDN（Content Distribute Network，內容分發網絡）的本質仍然是一個緩存，並且將數據緩存在離用戶最近的地方，

使用戶以最快速度獲取數據，即所謂網絡訪問第一跳。

因爲CDN部署在網絡運營商的機房，這些運營商又是終端用戶的網絡服務提供商，

所以用戶請求的第一跳就到達了CDN服務器，當CDN中存在瀏覽器請求的資源時，從CDN直接返回給瀏覽器，

最短路徑返回響應，加快用戶訪問速度，減小數據中心負載壓力。

 

CDN可以緩存的通常是靜態資源，如圖片、文件、CSS、Script腳本、靜態網頁等，

可是這些文件訪問頻度很高，將其緩存在CDN可極大改善網頁的打開速度。

 

3.反向代理

傳統代理服務器位於瀏覽器一側，，代理瀏覽器將http請求放鬆到互聯網上，而反向代理服務器位於機房一側，代理網站Web服務器接收http請求。

和傳統代理服務器能夠保護瀏覽器安全同樣，反向代理服務器也具備保護網站安全的做用，

來自互聯網的訪問請求必須通過代理服務器，至關於在Web服務器和可能的網絡攻擊之間創建了一個屏障。

 

除了安全功能，代理服務器也能夠經過配置緩存功能加速Web請求。

當用戶第一次訪問靜態內容的時候，靜態內容就被緩存在反向代理服務器上，這樣當其餘用戶訪問該靜態內容的時候，

就能夠直接從反向代理服務器返回，加速Web請求響應速度，減輕Web服務器負載壓力。

事實上，有些網站也會把動態內容緩存在代理服務器上，好比維基百科及某些博客論壇網站，

把熱門詞條、帖子、博客緩存在反向代理服務器上加速用戶訪問速度，當這些靜態內容有變化時，

經過內部通知機制通知反向代理緩存失效，反向代理會從新加載最新的動態內容再次緩存起來。

 

此外，反向代理也能夠實現負載均衡的功能，經過負載均衡構建的應用集羣能夠提升系統整體處理能力，進而改善網站高併發狀況下的性能。