====索引=====
【Web緩存機制概述】4 – HTML5時代的Web緩存機制
【Web緩存機制概述】5 – Web App時代的緩存機制新思路
============
前言&摘要
這段時間的工作內容主要是為一個客戶端類型的產品增加文檔在線存儲和文檔在線預覽相關特性。由於測試的同事比較細心和專業，發現了項目實現中一些效率低下的環節，比如在線預覽圖片沒有經過壓縮、重開打開同一張圖片沒有有效利用Web緩存等問題。而這些細節問題往往在做項目架構時，容易因為時間緊張等等因素而被忽略。雖然以前也有一些關於Web緩存的意識，但並沒有很系統的了解、總結，並在項目中進行合理的運用。借此機會，整理了一些相關資料和項目的實際應用實踐，做個備忘，便於在日后的項目查詢和應用。
本文從Web緩存的定義、作用、分類、工作機制等方面介紹了目前常用的Web緩存及其原理，並給出如何構建有效利用Web緩存的站點。最后探討了在HTML5和Web App、Web Game逐漸盛行的今天，現代瀏覽器給我們提供哪些有利於Web緩存、提高訪問效率的機制，前端的代碼架構又能從哪些方面進行調整，更好的利用Web緩存等問題。
什么是Web緩存
Web緩存是指一個Web資源（如html頁面，圖片，js，數據等）存在於Web服務器和客戶端（瀏覽器）之間的副本。緩存會根據進來的請求保存輸出內容的副本；當下一個請求來到的時候，如果是相同的URL，緩存會根據緩存機制決定是直接使用副本響應訪問請求，還是向源服務器再次發送請求。比較常見的就是瀏覽器會緩存訪問過網站的網頁，當再次訪問這個URL地址的時候，如果網頁沒有更新，就不會再次下載網頁，而是直接使用本地緩存的網頁。只有當網站明確標識資源已經更新，瀏覽器才會再次下載網頁。至於瀏覽器和網站服務器是如何標識網站頁面是否更新的機制，將在后面介紹。
Web緩存的作用
使用Web緩存的作用其實是非常顯而易見的：
減少網絡帶寬消耗
無論對於網站運營者或者用戶，帶寬都代表着金錢，過多的帶寬消耗，只會便宜了網絡運營商。當Web緩存副本被使用時，只會產生極小的網絡流量，可以有效的降低運營成本。
降低服務器壓力
給網絡資源設定有效期之后，用戶可以重復使用本地的緩存，減少對源服務器的請求，間接降低服務器的壓力。同時，搜索引擎的爬蟲機器人也能根據過期機制降低爬取的頻率，也能有效降低服務器的壓力。
減少網絡延遲，加快頁面打開速度
帶寬對於個人網站運營者來說是十分重要，而對於大型的互聯網公司來說，可能有時因為錢多而真的不在乎。那Web緩存還有作用嗎？答案是肯定的，對於最終用戶，緩存的使用能夠明顯加快頁面打開速度，達到更好的體驗。
Web緩存的類型
在Web應用領域，Web緩存大致可以分為以下幾種類型：
數據庫數據緩存
Web應用，特別是SNS類型的應用，往往關系比較復雜，數據庫表繁多，如果頻繁進行數據庫查詢，很容易導致數據庫不堪重荷。為了提供查詢的性能，會將查詢后的數據放到內存中進行緩存，下次查詢時，直接從內存緩存直接返回，提供響應效率。比如常用的緩存方案有memcached等。
瀏覽器端緩存
瀏覽器緩存根據一套與服務器約定的規則進行工作，在同一個會話過程中會檢查一次並確定緩存的副本足夠新。如果你瀏覽過程中，比如前進或后退，訪問到同一個圖片，這些圖片可以從瀏覽器緩存中調出而即時顯現。
服務器端緩存
代理服務器緩存
代理服務器是瀏覽器和源服務器之間的中間服務器，瀏覽器先向這個中間服務器發起Web請求，經過處理后（比如權限驗證，緩存匹配等），再將請求轉發到源服務器。代理服務器緩存的運作原理跟瀏覽器的運作原理差不多，只是規模更大。可以把它理解為一個共享緩存，不只為一個用戶服務，一般為大量用戶提供服務，因此在減少相應時間和帶寬使用方面很有效，同一個副本會被重用多次。常見代理服務器緩存解決方案有Squid等，這里不再詳述。
CDN緩存
CDN（Content delivery networks）緩存，也叫網關緩存、反向代理緩存。CDN緩存一般是由網站管理員自己部署，為了讓他們的網站更容易擴展並獲得更好的性能。瀏覽器先向CDN網關發起Web請求，網關服務器后面對應着一台或多台負載均衡源服務器，會根據它們的負載請求，動態將請求轉發到合適的源服務器上。雖然這種架構負載均衡源服務器之間的緩存沒法共享，但卻擁有更好的處擴展性。從瀏覽器角度來看，整個CDN就是一個源服務器，從這個層面來說，本文討論瀏覽器和服務器之間的緩存機制，在這種架構下同樣適用。
Web應用層緩存
應用層緩存指的是從代碼層面上，通過代碼邏輯和緩存策略，實現對數據，頁面，圖片等資源的緩存，可以根據實際情況選擇將數據存在文件系統或者內存中，減少數據庫查詢或者讀寫瓶頸，提高響應效率。
后續將從Web前端的角度討論瀏覽器緩存機制、前端應用層緩存。
原貼地址:http://www.alloyteam.com/2012/03/web-cache-1-web-cache-overview/