最近在模仿QQ的相册,发现QQ相册中的大小图片都是动态的,通过抓包工具发现Http返回的状态码是304.
大家应该都知道当浏览器缓存了文件就直接从缓存中读取,状态码就是304.所以QQ相册的这种动态缓存技术让我研究了一段时间,现把研究结果记录下来,备用。
实现原理:
首先,要知道原始图片的最后一次修改时间。
其次,获取本地缓存文件夹中该文件的时间。
最后,两个时间比较,如果本地缓存的时间大于原始图片最后一次修改的时间,那么就告诉浏览器本地已经有这个文件了,不用再去请求了,将HTTP状态值置为304即可;否则就去动态生成你需要的小图片,并且将这个小图片通过设置 Last-Modified HTTP标头来实现本地访问时间。
好了,原理我们知道了,那代码怎么实现呢?
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
{
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,这里转换后将毫秒去掉后就可以正常了。