最近在模仿QQ的相冊,發現QQ相冊中的大小圖片都是動態的,通過抓包工具發現Http返回的狀態碼是304.
大家應該都知道當瀏覽器緩存了檔就直接從緩存中讀取,狀態碼就是304.所以QQ相冊的這種動態緩存技術讓我研究了一段時間,現把研究結果記錄下來,備用。

 

實現原理:
首先,要知道原始圖片的最後一次修改時間。
其次,獲取本機快取資料夾中該檔的時間。
最後,兩個時間比較,如果本機快取的時間大於原始圖片最後一次修改的時間,那麼就告訴瀏覽器本地已經有這個檔了,不用再去請求了,將HTTP狀態值置為304即可;否則就去動態生成你需要的小圖片,並且將這個小圖片通過設置 Last-Modified HTTP標頭來實現本地存取時間。

 

好了,原理我們知道了,那代碼怎麼實現呢?



代碼
protected void Page_Load(object sender, EventArgs e)
{
string imgPath = string.IsNullOrEmpty(Request["imgPath"]) ? "" : Request["imgPath"].ToString();

 

Response.ContentType = "image/jpeg";
DateTime contentModified = System.IO.File.GetLastWriteTime(imgPath);

 

if (IsClientCached(contentModified))
{
Response.StatusCode = 304;

 

Response.SuppressContent = true;
}
else
{

 

Thumbnail.GenerateHighThumbnail(imgPath, 80, 80); //這裡是生成縮略圖的代碼,網上到處都是,這裡就不展現了。

 

Response.Cache.SetETagFromFileDependencies();
Response.Cache.SetAllowResponseInBrowserHistory(true);

 

Response.Cache.SetLastModified(contentModified);
}



}

 

private bool IsClientCached(DateTime contentModified)
{
string header = Request.Headers["If-Modified-Since"];

 

if (header != null)
{
DateTime isModifiedSince;
if (DateTime.TryParse(header, out isModifiedSince))
{
return isModifiedSince >= DateTime.Parse(contentModified.ToString());
}
}

 

return false;
}



重點說一下IsClientCached方法中的 return isModifiedSince >= DateTime.Parse(contentModified.ToString());

 

這裡contentModified本來就是DateTime類型,為什麼還要把它轉成字串,然後再轉回日期型呢?

 

我在這裡折騰了好長時間,是因為我們取出原始圖片最後一次修改的時間精確到毫秒,而通過Request.Headers["If-Modified-Since"];請求的結果是倫敦標準時間,沒有毫秒值,所以如果不轉換一下就會出現已經緩存的圖片,由於毫秒的問題,使return isModifiedSince >= DateTime.Parse(contentModified.ToString()); 返回false,這裡轉換後將毫秒去掉後就可以正常了。
創作者介紹
創作者 shadow 的頭像
shadow

資訊園

shadow 發表在 痞客邦 留言(0) 人氣()