緩存的故事

前幾天按照Node.js中文社區上的教程，用Node.js搭了一個簡單的靜態文件服務器，其中有一個功能是提供緩存支持，在實踐這一部分的過程當中，我從新學習了緩存的相關知識，在這裏做簡單的梳理。

關於緩存的相關介紹，網上有很多文章，這裏推薦三篇我認爲不錯的文章：

• http://blog.csdn.net/eroswang/article/details/8302191
• http://www.oschina.net/news/41397/web-cache-knowledge
• http://cloudbbs.org/forum.php?mod=viewthread&tid=15790

緩存是什麼，簡單的說，就是訪問頁面時不須要從新請求瀏覽器已經緩存的資源（如圖片、css、js等)，前提是這些位於服務器的資源並無發生變動。因此，如何肯定這些資源沒有發生變動、如何控制緩存過時的時間成了必須解決的問題。這些內容在以上三篇文章中都有詳細的介紹，我這裏僅從四種使用情景來分析瀏覽器和服務器的交互過程。

情景一：用戶第一次在瀏覽器中輸入網址，或者經過連接訪問某個網站

瀏覽器（客戶端）發出請求，請求網頁上的全部資源，一個資源對應一個請求，服務器端收到請求後，向客戶端發送200的狀態碼，表示該資源請求成功，並返回響應頭（response header）和數據體。其中，響應頭包含了如下幾個重要的頭信息：

• last-modified：該資源（文件）的最後修改時間，爲UTC格式
• Expires：該資源的緩存過時時間，爲絕對時間，即過了這個指定時間後緩存失效，爲UTC格式
• Cache-Control：一般經過max-age指定緩存過時時間，爲相對時間，表示某次請求成功後多少秒內緩存可用，單位爲秒

Cache-Control的出現是由於服務器端的時間可能存在偏差，其優先級高於Expires。瀏覽器接收到響應後，會記錄這些信息，方便以後的緩存控制。

情景二：用戶第N次（N大於1）在瀏覽器中輸入網址，或者經過連接訪問某個網站

瀏覽器首先檢查待請求的資源的狀態，先檢查Cache-Control，沒有則檢查Expires，若是緩存未過時，則瀏覽器不向服務器端發送請求，直接返回200 from cache，代表是從緩存中獲取的資源。也就是說，就算服務器端該資源已經發生變化，只要緩存未過時，就不會從新請求資源，因此刷新的做用就體現出來了。

情景三：資源已經緩存，用戶刷新頁面（按F5）

瀏覽器向服務器發送資源請求，請求頭中包含如下兩個頭信息：

• Cache-Control：其中max-age=0（刷新時置爲0），表示本地緩存已過時，要向服務器確認
• if-modified-since：這是時間等於上一次成功請求該資源後從last-modified獲取的時間，爲UTC格式

服務器接收到請求，將待請求資源的最後一次修改時間和if-modified-since進行對比。若是前者與後者不相等，則說明文件已經變更，則從新下載該資源，並返回200狀態碼；若是前者與後者相等，則從本地緩存中獲取，並返回304 Not Modified。

情景四：資源已經緩存，用戶強制刷新頁面（按Ctrl + F5）

強制刷新時，請求頭中的Cache-Control的值設爲no-cache，表示強制發送請求，此外請求頭中無If-Modified-Since頭信息，這樣，不管緩存是否過時，不管服務器端文件是否發生變動，都會強制下載請求的資源，這就是所謂的「強制刷新」。

最後，附上用node.js實現靜態文件服務器的教程：

用NodeJS打造你的靜態文件服務器