thelastmarine

博客园 首页 新随笔 联系 订阅 管理

如何利用客户端缓存对网站进行优化?

Posted on 2008-07-28 11:40 阅读(474) 评论(2)  编辑 收藏 网摘 所属分类: ASP.NET
介绍
        你的网站在并发访问很大并且无法承受压力的情况下,你会选择如何优化? 
        很多人首先会想从服务器缓存方面着手对程序进行优化,许多不同的服务器缓存方式都有他们自己的特点,像我曾经参与的一些项目中,根据缓存的命中率不同使用过 Com+/Enterprise Libiary Caching/Windows服务,静态文件等方式的服务器端缓存和 HTTP Compression技术,但客户端缓存往往却被人们忽略了,即使服务器的缓存让你的页面访问起来非常地快,但她依然需要依赖浏览器下载并输出,而当你加入客户端缓存时,会给你带来非常多的好处.因为她可以对站点中访问最频繁的页进行缓存充分地提高 Web 服务器的吞吐量(通常以每秒的请求数计算)以提升应用程序性能和可伸缩性。 
        一个在线购物调查显示,大多数人愿意去商店排队,但在在线购物时却不愿意等待。Websense调查公司称多达70%的上网者表示不愿意在页面读取上超过10秒钟。超过70%的人会因为中途速度过慢而取消当前的订单。

      基础知识

        1) 什么是”Last-Modified”? 

        在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个Last-Modified的属性标记此文件在服务期端最后被修改的时间,格式类似这样: 

        Last-Modified: Fri, 12 May 2006 18:53:33 GMT 

        客户端第二次请求此URL时,根据 HTTP 协议的规定,浏览器会向服务器传送 If-Modified-Since 报头,询问该时间之后文件是否有被修改过: 

        If-Modified-Since: Fri, 12 May 2006 18:53:33 GMT 

        如果服务器端的资源没有变化,则自动返回 HTTP 304 (Not Changed.)状态码,内容为空,这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时,则重新发出资源,返回和第一次请求时类似。从而保证不向客户端重复发出资源,也保证当服务器有变化时,客户端能够得到最新的资源。 

        2) 什么是”Etag”? 

        HTTP 协议规格说明定义ETag为“被请求变量的实体值” (参见 —— 章节 14.19)。 另一种说法是,ETag是一个可以与Web资源关联的记号(token)。典型的Web资源可以一个Web页,但也可能是JSON或XML文档。服务器单独负责判断记号是什么及其含义,并在HTTP响应头中将其传送到客户端,以下是服务器端返回的格式: 

        ETag: "50b1c1d4f775c61:df3" 

        客户端的查询更新格式是这样的: 

        If-None-Match: W/"50b1c1d4f775c61:df3" 

        如果ETag没改变,则返回状态304然后不返回,这也和Last-Modified一样。本人测试Etag主要在断点下载时比较有用。
        

      Last-Modified和Etags如何帮助提高性能?

        聪明的开发者会把Last-Modified 和ETags请求的http报头一起使用,这样可利用客户端(例如浏览器)的缓存。因为服务器首先产生 Last-Modified/Etag标记,服务器可在稍后使用它来判断页面是否已经被修改。本质上,客户端通过将该记号传回服务器要求服务器验证其(客户端)缓存。 
        过程如下:
                1. 客户端请求一个页面(A)。 
                2. 服务器返回页面A,并在给A加上一个Last-Modified/ETag。 
                3. 客户端展现该页面,并将页面连同Last-Modified/ETag一起缓存。 
                4. 客户再次请求页面A,并将上次请求时服务器返回的Last-Modified/ETag一起传递给服务器。 
                5. 服务器检查该Last-Modified或ETag,并判断出该页面自上次客户端请求之后还未被修改,直接返回响应304和一个空的响应体。

示例代码

        下面的例子描述如何使用服务器端代码去操作客户端缓存: 

        

 1//默认缓存的秒数
 2 int secondsTime = 100;
 3 
 4 //判断最后修改时间是否在要求的时间内
 5 //如果服务器端的文件没有被修改过,则返回状态是304,内容为空,这样就节省了传输数据量。如果服务器端的文件被修改过,则返回和第一次请求时类似。
 6 if (request.Headers["If-Modified-Since"!= null && TimeSpan.FromTicks(DateTime.Now.Ticks - DateTime.Parse(request.Headers["If-Modified-Since"]).Ticks).Seconds < secondsTime)
 7 {
 8     //测试代码,在这里会发现,当浏览器返回304状态时,下面的日期并不会输出
 9     Response.Write(DateTime.Now);
10 
11     response.StatusCode = 304;
12     response.Headers.Add("Content-Encoding""gzip");
13     response.StatusDescription = "Not Modified";
14 }

15 else
16 {
17     //输出当前时间
18     Response.Write(DateTime.Now);
19 
20     //设置客户端缓存状态
21     SetClientCaching(response, DateTime.Now);
22 }

23 
24 /// <summary>
25 /// 设置客户端缓存状态
26 /// </summary>
27 /// <param name="response"></param>
28 /// <param name="lastModified"></param>

29 private void SetClientCaching(HttpResponse response, DateTime lastModified)
30 {
31     response.Cache.SetETag(lastModified.Ticks.ToString());
32     response.Cache.SetLastModified(lastModified);
33     //public 以指定响应能由客户端和共享(代理)缓存进行缓存。
34     response.Cache.SetCacheability(HttpCacheability.Public);
35     //是允许文档在被视为陈旧之前存在的最长绝对时间。
36     response.Cache.SetMaxAge(new TimeSpan(7000));
37     //将缓存过期从绝对时间设置为可调时间
38     response.Cache.SetSlidingExpiration(true);
39 }


如果你的缓存是基于文件的方式,如XML或http中的.ashx处理,也可以使用下面的基于文件方式的客户端缓存: 


 1/// <summary>
 2/// 基于文件方式设置客户端缓存
 3/// </summary>
 4/// <param name="fileName"></param>

 5private void SetFileCaching(HttpResponse response, string fileName)
 6{
 7    response.AddFileDependency(fileName);
 8    //基于处理程序文件依赖项的时间戳设置 ETag HTTP 标头。 
 9    response.Cache.SetETagFromFileDependencies();
10    //基于处理程序文件依赖项的时间戳设置 Last-Modified HTTP 标头。
11    response.Cache.SetLastModifiedFromFileDependencies();
12    response.Cache.SetCacheability(HttpCacheability.Public);
13    response.Cache.SetMaxAge(new TimeSpan(7000));
14    response.Cache.SetSlidingExpiration(true);
15}

16

        

结论

        我们已经看了如何使用客户端缓存减少带宽和计算的方法,如前所述,如果能正确合理的利用各种不同的缓存,他们会给你带来很多的好处.我希望本文已为你当下或将来基于Web的项目提供了精神食粮,并正确地在底层利用Last- Modified和ETag响应头去优化你的项目。 
工作五年,长期从事于asp.net方面的编程,业余爱好VC编程,温和、谦虚、自律、自信、善于与人交往沟通
==========================

[Flash开发笔记]如何让Flash的swf文件在客户端不缓存

    问题
    如何让Flash的swf在客户端不缓存?即如何让swf文件不出现在IE浏览器的临时文件夹里?

    方法:

    一般的我们对于动态页面(asp,php等)禁止缓存都是通过语言本身设置HTTP头来实现的,但swf不能直接设置HTTP头。办法就是可以从服务端着手,在IIS里添加HTTP头:

cache-control: "no-cache"
pragma: "no-cache"
expires: "-1"


    操作方法见图示:



    但在设置IIS时要注意,如果对整个网站设置了HTTP头,则整站的内容(如jpg,gif,css,html等)都不会被缓存了,这样会导致每次都要重新下载这些文件,不好。那么可以更进一步,在网站下创建一个虚拟目录,然后对此虚拟目录设置HTTP头,把禁止缓存的swf文件放在其中。
 
===========================================
HTTP 缓存介绍
2008-10-27 22:22

2种方式来提升你的web 应用程序的速度:

1、减少请求和响应的往返次数
2、减少请求和响应的往返字节大小

HTTP缓存是最好的减少客户端服务器端往返次数的办法。缓存提供了提供一种机制来保证客户端 或者代理能够存储一些东西,而这些东西将会在稍后的HTTP 响应中用到的。(即第一次请求了,到了客户端,缓存起来,下次如果页面还要这个JS文件或者CSS文件啥的,就不要到服务器端去取下来了,但是还是要去服 务器上去访问一次,因为请求要对比ETAG值,关于这个值,我将会在下次翻译中介绍其作用)这样,就不用让文件再次跨越整个网络了。

缓存相关的请求头
为了提高性能,微软的IE和其他的web客户端总是想尽办法来维持从远程服务器上下载下来的本地的缓存。
当客户端需要一个资源(html,css.js…),他们有3种可能的动作:
1 发送一个一般的HTTP请求到远程服务器端,请求这个资源。
2 发送一个有条件的HTTP请求到服务器,条件就是如果它不同于本地的缓存版本。
3 如果缓存的拷贝可用,就使用本地的缓存资源。

当发送一个请求,客户也许会使用如下的几个HEADER
Table 1. Client Cache Headers

Pragma: no-cache | The client is unwilling to accept any cached responses from caches along the route and the origin server must be contacted for a fresh copy of the resource.

If-Modified-Since: datetime | The server should return the requested resource only if the resource has been modified since the date-time provided by the client.

If-None-Match: etagvalue | The server should return the requested resource if the ETAG of the resource is different than the value provided by the client. An ETAG is a unique identifier representing a particular version of a file.

解释:
1 Pragma:no-cache 表明客户端不愿意接受缓存请求,它需要的是最即时的资源。
2 If-Modified-Since: datetime 表明如果这个资源自从上次被客户端请求,就已经修改了,那么服务器就会返回给客户端最新的。
3 If-None-Match: etagvalue 如果客户端资源的ETAG值跟服务器端不一致了,那么服务器端返回最新的资源。ETAG就是一个唯一的ID,用来表示一个文件的一个特定的版本。

如果要是这些有条件的请求,也就是含有If-Modified-Since 或者 If-None-MatchHeader头的请求,服务器将会以HTTP/304 Not Modified 来作为响应,那么客户端就知道可以使用客户端的缓存了。否则,服务器将会返回一个新的响应并且客户端就会抛弃过期的缓存资源。
你可以观察2个连贯的请求,来请求同一个图片,你会在Fiddler中发现:在第一个本地缓存 版本中,服务器返回一个含有ETAG的文件,和一个含有最后修改日期的文件,在这个第一次的请求会话中,一个本地的缓存版本已经可以使用了。这样一来,一 个有条件的请求就被创建出来。然后你再次请求这个图片的时候,他就就会响应一个本地缓存的文件,当然前提是第一次缓存的图片的ETAG值或者If- Modified-Since 值跟服务器上匹配的话,服务器就响应一个304给客户端。

Session #1
GET /images/banner.jpg HTTP/1.1
Host: http://www.bayden.com/

HTTP/1.1 200 OK
Date: Tue, 08 Mar 2006 00:32:46 GMT
Content-Length: 6171
Content-Type: image/jpeg
ETag: "40c7f76e8d30c31:2fe20"
Last-Modified: Thu, 12 Jun 2003 02:50:50 GMT

Session #2
GET /images/banner.jpg HTTP/1.1
If-Modified-Since: Thu, 12 Jun 2003 02:50:50 GMT
If-None-Match: "40c7f76e8d30c31:2fe20"
Host: http://www.bayden.com/

HTTP/1.1 304 Not Modified

因为一个HTTP304响应仅仅包含头,没有body,所有它在穿越互联网的时候要比携带了资源的快很多,尽管如此,HTTP/304响应需要一个服务器的往返,但是通过细心的设置响应头,web程序员可以消除这种因素,甚至是有条件的请求。

缓存相关响应头
通常缓存机制是由响应头来控制的。HTTP规范描述了Header控制缓存,The optional Cache-Control,Expires(过期)。
Expires头包含一个绝对的日期,当超过此日期,它将不会被考虑更新了。

Table 2. Common Cache-Control Headers

public :The response may be stored in any cache, including caches shared among many users.
private :The response may only be stored in a private cache used by a single user.
no-cache :The response should not be reused to satisfy future requests.
no-store :The response should not be reused to satisfy future requests, and should not be written to disk. This is primarily used as a security measure for sensitive responses.
max-age=#seconds :The response may be reused to satisfy future requests within a certain number of seconds.
must-revalidate :The response may be reused to satisfy future requests, but the origin server should first be contacted to verify that the response is still fresh.

Cache-Control头的参数设置:
Public 响应会被缓存,并且在多用户间共享。
Private 响应只能够作为私有的缓存,不能再用户间共享。
No-cache 响应不会被缓存
No-store 响应不会被缓存,并且不会被写入到客户端的磁盘里,这也是基于安全考虑的某些敏感的响应才会使用这个。
Max-age=#seconds 响应将会某个指定的秒数内缓存,一旦时间过了,就不会被缓存。
Must-revalidate 响应会被重用来满足接下来的请求,但是它必须到服务器端去验证它是不是仍然是最新的。

如果你发现你经常在你的网站上更新文件,但是并没有更改文件名字,那你就必须要非常小心地设置 你的缓存生存时间。例如:如果你要一个thisyear.gif图片文件显示当前的年份在网站上,你需要保证这个缓存过期时间不能超过一天,否则一个用户 在12月31号访问你的网站的时候,在1月1号就不能显示正确的日期。
由于某些原因,服务器可能会设置:Progma:no-cache 头,Cache-control:no-cache
Header中的参数:Vary 是一个缓存信号,Vary:User-Agent表示缓存当前的响应,但是仅限于当发送同样的User-Agent 头的时候。指令 Vary:* 就相当于Cache-Control:no-Cache。
Vary就相当于asp.net中的缓存的参数一样,意思是根据什么来缓存,如果要是知道asp.net的缓存的使用方法,就很容易明白这个参数的意思。

如果响应不包含expires或者cache-control,那么客户端就会被迫作为一个有条件的请求,来保证所有的资源都是最新的。

有条件的请求和WininetCache
IE通过Microsoft windows Internet Services来最大程度的利用缓存服务。WinInet允许用户配置缓存的大小和行为,设置缓存进行如下操作:
1 打开IE,
2 工具选项,选择Internet选项,在一般子选项中,临时文件夹内,点击设置

HTTP压缩
目前流行的WEB服务器和浏览器都提供HTTP压缩支持。HTTP压缩可以非常显著地降低客户端和服务器端的通讯量。节省超过50%的HTML,XML,CSS,JS等文件。

一个浏览器发送一个信号给服务器,他可以介绍HTTP压缩过的内容,并且会把客户端所支持的压缩类型放在请求的Header中,

例如:考虑如下的请求:
GET / HTTP/1.1
Accept: */*
Accept-Language: en-us
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)
Host: search.msn.com
这个Accept-Encoding头表明IE将愿意接受GZIP格式的和DEFLATE格式的压缩响应。

相应的响应如下:
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Server: Microsoft-IIS/6.0 --Microsoft-HTTPAPI/1.0X-Powered-By: ASP.NET
Vary: Accept-Encoding
Content-Encoding: gzipDate: Tue, 15 Feb 2006 09:14:36 GMT
Content-Length: 1277
Connection: close
Cache-Control: private, max-age=3600

实验表明,使用HTTP压缩能大量减少数据往返,一个普通的CSS文件甚至能减少80%!当然压缩是以牺牲CPU性能为代价的。特别是压缩动态文件,但是一般的权宜之策是压缩例如JS,CSS等静态文 件,因为他们在第一次压缩后,就会被存储在服务器上,如果要压缩asp.net动态文件,一定要有个权衡才行。

posted on 2012-07-02 16:17  何冲  阅读(200)  评论(0编辑  收藏  举报