緩存分爲服務端側(server side,好比 Nginx、Apache)和客戶端側(client side,好比 web browser)。php
服務端緩存又分爲 代理服務器緩存 和 反向代理服務器緩存(也叫網關緩存,好比 Nginx反向代理、Squid等),其實普遍使用的 CDN 也是一種服務端緩存,目的都是讓用戶的請求走」捷徑「,而且都是緩存圖片、文件等靜態資源。html
客戶端側緩存通常指的是瀏覽器緩存,目的就是加速各類靜態資源的訪問,想一想如今的大型網站,隨便一個頁面都是一兩百個請求,天天 pv 都是億級別,若是沒有緩存,用戶體驗會急劇降低、同時服務器壓力和網絡帶寬都面臨嚴重的考驗。前端
瀏覽器緩存控制機制有兩種:HTML Meta標籤 vs. HTTP頭信息node
瀏覽器緩存機制,其實主要就是HTTP協議定義的緩存機制(如: Expires; Cache-control等)。可是也有非HTTP協議定義的緩存機制,如使用HTML Meta 標籤,Web開發者能夠在HTML頁面的<head>節點中加入<meta>標籤,代碼以下:web
1segmentfault |
|
上述代碼的做用是告訴瀏覽器當前頁面不被緩存,每次訪問都須要去服務器拉取。使用上很簡單,但只有部分瀏覽器能夠支持,並且全部緩存代理服務器都不支持,由於代理不解析HTML內容自己。而普遍應用的仍是 HTTP頭信息 來控制緩存,下面我主要介紹HTTP協議定義的緩存機制。緩存
1服務器 2網絡 3 4 5 6 7 8 9 |
|
1 2 |
|
1 2 |
|
1 2 3 |
|
Etag是服務器自動生成或者由開發者生成的對應資源在服務器端的惟一標識符,可以更加準確的控制緩存。Last-Modified與ETag一塊兒使用時,服務器會優先驗證ETag。
瀏覽器緩存行爲還有用戶的行爲有關,若是你們對 強制刷新(Ctrl + F5) 還有印象的話應該能馬上明白個人意思~
用戶操做 |
Expires/Cache-Control |
Last-Modified/Etag |
地址欄回車 |
有效 |
有效 |
頁面連接跳轉 |
有效 |
有效 |
新開窗口 |
有效 |
有效 |
前進、後退 |
有效 |
有效 |
F5刷新 |
無效(BR重置max-age=0) |
有效 |
Ctrl+F5刷新 |
無效(重置CC=no-cache) |
無效(請求頭丟棄該選項) |
具體請參考文末 Refer [6]
[1] 瀏覽器緩存機制
http://www.cnblogs.com/skynet/archive/2012/11/28/2792503.html
[2] Web 開發人員需知的 Web 緩存知識
http://www.oschina.net/news/41397/web-cache-knowledge
[3] 瀏覽器緩存詳解:expires,cache-control,last-modified,etag詳細說明
http://blog.csdn.net/eroswang/article/details/8302191
[4] 在瀏覽器地址欄按回車、F五、Ctrl+F5刷新網頁的區別
http://cloudbbs.org/forum.php?mod=viewthread&tid=15790
http://blog.csdn.net/yui/article/details/6584401
[5] Cache Control 與 ETag
https://blog.othree.net/log/2012/12/22/cache-control-and-etag/
[6] 緩存的故事
http://segmentfault.com/blog/animabear/1190000000375344
[7] Google的PageSpeed網站優化理論中提到使用Etag能夠減小服務器負擔
https://developers.google.com/speed/docs/pss/AddEtags
[8] yahoo的Yslow法則中則提示謹慎設置Etag
http://developer.yahoo.com/performance/rules.html#etags
分類: 前端優化