微服務架構 前後端交互優化 下篇

Web緩存優化

分析思考

• 什麼是Web緩存，以及它有哪些類型
• 爲何要使用Web緩存,它如何讓請求更高效
• 基本理念：重驗證、更新
• 工作機制、控制緩存和不緩存、主動/被動清除緩存

概述講解

• web緩存 指發起請求客戶端到執行功能的Web服務器之間用來保存服務器輸出的副本、並提供給發起請求的客戶端，其類型包括（瀏覽器緩存、CDN、反向代理服務器緩存如Varnish後續文章詳細闡述）
• 使用Web緩存加快響應速度，提高用戶滿意度
• 減少服務端處理壓力，以同樣資源來支撐更大的訪問量和高併發
• 通常存放緩存中的內容是有時效的，因此經常要對緩存中的內容做有效性檢查，也稱 “重驗證”，更新目的爲了保證緩存中內容和服務器中的內容保持一致
• 工作機制主要通過Http頭部增加：Last-Modified,If-Modified-Since,Expires,Cache-Control等標識，可同服務器進行商定，以保證瀏覽器是否緩存
• 服務器端返回Http頭部設置：Expires,Cache-Control:max-age,同時返回，max-age優先處理，如 response.setHeader(“Cache-Control”:“max-age=100”)

如圖所示，瀏覽器自動緩存靜態資源（css\js\img），緩存策略如Modified,If-Modified，並判斷服務器文件是否改動，重驗證
自動獲取新的內容緩存
如js使用ajax獲取後端數據，後端返回是可以設置header頭部：如Last-Modified,那麼客戶端在下一次請求報文中會包含
“If-Modified-Since”,當服務端收到後，服務端會自動比較兩個時間，若“Last-Modified” 更大，表明客戶端緩存中內容已超時，
服務器會將最新的內容（新Header）返回客戶端，狀態爲“200”，否則會認爲客戶端緩存中內容是最新的，返回客戶端狀態“304”
同時包含最新Header頭部

參數講解
response.setHeader(“Cache-Control”:“no-cache”),禁止緩存，瀏覽器可能會緩存，需要檢查服務器一致
response.setHeader(“Cache-Control”:“no-store”)，禁止緩存，瀏覽器刪除緩存內容
response.setDateHeader(“Expires”:-1) 過期時間
response.setDateHeader(“max-age”:0)，不緩存文檔，每次訪問緩存前檢查

F5和Ctrl+F5刷新實現也有差異，F5讓瀏覽器去執行一次一致性檢查，而Ctrl+F5 刪除本地緩存後再去執行一次一致性檢查

靜態資源更新如何主動通知瀏覽器緩存失效，解決思路

• 頁面上使用ESI來動態引入
• 資源資源鏈接後加上“版本號”或者“？時間戳”，因爲瀏覽器是按照url來緩存，更新後瀏覽器認爲是新的地址，故重新加載一次
• 主動請求PURGE,讓Varnish裏面緩存這些資源內容失效，這樣Varnish會重新獲取內容，並將新內容返回客戶端
• 客戶端瀏覽器會發起新的請求，去重驗證資源是否有更新，按照新的連接發出的，那麼服務端沒有連接對應的Etag，重新下載新的
  資源

Http請求加速

分析思考

• http如何加速，爲什麼可以加速
• http加速過程

概述講解

通常會使用Varnish來讓http加速，其原理是利用緩存來提高Web訪問效率，見下圖

外界流量F5/DNS/LVS請求流量進來後指定到Ngnix,部分動態內容和靜態資源負載均衡反向代理到Varnish,其中配置VCL，指定相應需要緩存的地址，達到高效狀態

在本地通過ab命令對比過以下場景

• 直接訪問tomcat地址，ab 1000個併發，160/TPS
• 通過Nginx反向代理後，ab 1000個併發，170/TPS
• 直接訪問到Varnish，ab 1000個併發，2300/TPS
• 通過Nginx反向代理到Varnish，ab 1000個併發，1300/TPS

由此可見 單使用Varnish效果最佳，如果小項目可以直接用Varnish代理，可達最佳效果，大型項目推薦使用Nginx+Varnish，因爲Nginx負載均衡處理能力比Varnish高達10倍以上，Varnish優勢在於讓其Http加速

多請求優化

優化思路

連接請求併發送請求部分優化手段，內聯在減少http請求數的同時，也會帶來很多問題

• 沒有瀏覽器緩存

• 沒有邊緣緩存 如CDN

• 沒有按需加載

• 不能進行預加載

• 非常小的文件，而且使用地方很少，應該使用內聯，超過4K文件不要內聯

• 頁面中圖片（非CSS引用圖片）儘量不要內聯

• 謹慎內聯css圖片 8合理使用異步方式加載內容 如：使用圖片延遲加載技術減少http請求數和併發數，同時減少下載數據量

• 對於AJAX請求單查詢儘量使用GET方法，只需要一步，而POST請求要兩步，但需要注意GET最大處理URL長度有限制

頁面渲染優化

優化思路

• 儘量加快資源獲取
• 儘量減少DOM節點
• 儘量減少渲染過程的中斷和等待
• 儘量減少重繪
• 儘量避免迴流

常見問題思考

• 腳本文件存放在頁面頂部會引發問題，優化（存放底部）
  1.使用腳本時，對於位於腳本以下的內容，逐步呈現將被阻塞
  2.在下載腳本時會阻塞並行下載
  3.當腳本沒有加載進來，用戶觸發了腳本事件，可能會出現JS錯誤問題

• 樣式文件存放在頁面底部會引發問題，優化（存放頂部）
  1.白屏
  2.無樣式內容閃爍

• CSS儘量寫在Head，不要出現在Body，否則會引起重新渲染

• iframe會導致重繪，儘量減少使用數量

• 避免不必要渲染，如 position:fixed 定位在滾動時候會不停渲染，hover特效，建議頁面滾動時先取消效果，滾動停止後再加上hover效果。通過外層加類名進行控制，border:none而不是border:0，否則會渲染

總結：

前後端交互優化包括 （前後端數據傳輸壓縮，Web緩存優化、HTTP請求加速、多請求優化、頁面渲染優化）等，可根據系統現狀分別進行優化，從而提高視圖渲染，提高用戶體驗

作者簡介：張程 技術研究

更多文章請關注微信公衆號：zachary分解獅 (frankly0423)