Web架構中的前端頁面緩存


 

 

 

LAMP緩存圖

從圖中我們可以看到網站緩存主要分為五部分

服務器緩存:主要是基於web反向代理的靜態服務器nginx和squid,還有apache2的mod_proxy和mod_cache模

瀏覽器緩存:包括頁面html緩存和圖片js,css等資源的緩存

PHP緩存:有很多免費的PHP緩沖加速工具,如apc eaccerlertor等

內存緩存:主要是采用memcache這種分布式緩存機制

數據庫緩存:通過配置數據庫緩存,以及數據存儲過程,連接池技術等

下面重點介紹瀏覽器緩存原理:

 

 

從上圖:我們可以知道瀏覽器緩存重要分為兩個部分:

頁面html的緩存圖片,css,js,flash等緩存瀏覽器緩存是基於把頁面信息保存到用戶本地電腦硬盤里。

服務器緩存是基於把用戶訪問的頁面保存到服務器上的硬盤里。

頁面緩存的原理

頁面緩存狀態是由http header決定的,一個瀏覽器請求信息,一個是服務器響應信息。主要包括Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since。其中Pragma: no-cache由HTTP/1.0規定,Cache-Control由HTTP/1.1規定。

從圖中我們可以看到原理主要分三步:

第一次請求:瀏覽器通過http的header報頭,附帶Expires,Cache-Control,Last-Modified/Etag向服務器請求,此時服務器記錄第一次請求的Last-Modified/Etag再次請求:

當瀏覽器再次請求的時候,附帶Expires,Cache-Control,If-Modified-Since/Etag向服務器請求

 

服務器根據第一次記錄的Last-Modified/Etag和再次請求的If-Modified-Since/Etag做對比,判斷是否需要更新,然后響應請求。

相關參數說明:

Cache-Control的主要參數 Cache-Control: private/public Public 響應會被緩存,並且在多用戶間共享。 Private 響應只能夠作為私有的緩存,不能再用戶間共享。

Cache-Control: no-cache:不進行緩存

Cache-Control: max-age=x:緩存時間 以秒為單位

Cache-Control: must-revalidate:如果頁面是過期的 則去服務器進行獲取。

Expires:顯示的設置頁面過期時間

Last-Modified:請求對象最后一次的修改時間 用來判斷緩存是否過期 通常由服務器上文件的時間信息產生。

If-Modified-Since :客戶端發送請求附帶的信息 指瀏覽器緩存請求對象的最后修改日期 用來和服務器端的Last-Modified做比較。

Etag:ETag是一個可以 與Web資源關聯的記號(token),和Last-Modified功能才不多,也是一個標識符,一般和Last-Modified一起使用,加強服務器判斷的准確度。

圖片,css,js,flash的緩存

這個主要通過服務器的配置來實現這個技術,如果使用apache服務器的話,可以使用mod_expires模塊來實現.

同樣可以用nginx方式實現前端頁面緩存,詳情請看nginx利用proxy_cache來緩存文件

測試網頁性能工具

Page Speed

是開源 Firefox/Firebug 插件。網站管理員和網絡開發人員可以使用 Page Speed 來評估他們網頁的性能,並獲得有關如何改進性能的建議。

yslow

YSlow可以對網站的頁面進行分析,並告訴你為了提高網站性能,如何基於某些規則而進行優化


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM