码迷,mamicode.com
首页 > Web开发 > 详细

Web.Config 对静态文件 js css img 的客户端缓存策略

时间:2016-09-14 12:24:53      阅读:561      评论:0      收藏:0      [点我收藏+]

标签:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <configuration>
 3     <system.webServer>
 4         <staticContent>
 5             <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
 6         </staticContent>
 7         <handlers accessPolicy="Script,Read">
 8             <!-- For any request to a file exists on disk, return it via native http module. AccessPolicy="Script" above is to allow for a managed 404 page. -->
 9             <add name="StaticFile" path="*" verb="*" modules="StaticFileModule" preCondition="integratedMode" resourceType="File" requireAccess="Read" />
10         </handlers>
11     </system.webServer>
12 </configuration>

 

HTTP状态码 304 页面未修改

功能:304页面未修改

自从上次请求后,请求的网页未修改过。服务器返回此响应时,不会返回网页内容。
如果网页自请求者上次请求后再也没有更改过,您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。服务器可以告诉 Googlebot 自从上次抓取后网页没有变更,进而节省带宽和开销。

当你在 Response-Header 中加上这几项:

    Last-Modified: Wed, 18 Jun 2008 14:22:27 GMT
    Cache-Control: max-age=600
    Expires: Wed, 18 Jun 2008 14:48:39 GMT
    Date: Wed, 18 Jun 2008 14:38:39 GMT

其中 Last-Modified 后面的日期是上次更新 config 的时间,Date 后面是当前时间,Expires 后面是当前时间 + 10分钟,10分钟就是 Cache-Control 后面的 max-age,单位是秒。

Last-Modified

    如果客户端收到的 Response 中包含 Last-Modified,那么下次 request 的时候就会在 Request Header 中包含 If-Modified-Since 字段,值就是上次服务器发送的 Last-Modified,服务器端会判断上次的 config 时间是否比 If-Modified-Since 晚。如果自上次 request 之后又更新了 config,那么服务器就会返回完整的内容;如果期间没有更新 config,那么服务器就没必要返回完整的内容,只需要向客户端发送一个 304 Not Modified 状态码就可以了。

Cache-Control、Date 和 Expires

    这几个参数的组合,表示告诉浏览器:这个文件在多长时间之内不会更改,在这个时间内不需要再 request,保守起见,我设置了10分钟。

浏览器行为

    如果只是在网站的链接之间 click click click,那么浏览器会完全遵守上述行为。这样可以尽可能地减少请求次数,以及 response 的数据量。

如果在某个页面点击了浏览器的刷新按钮或者按 F5,浏览器会忽略 Expires 时间,把该页面需要的所有的文件都重新请求一遍。

如果按住 Ctrl 再刷新或者 Ctrl-F5 (俗称强制刷新),浏览器将不会发送 Last-Modified Header,将所有需要的文件请求一遍,服务器会返回文件的完整内容,而不是仅仅一个 304 Not Modified 状态码。

http code 304基础

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和一个空的响应体。

 

浏览器缓存

 

减少服务器之间的往返,缩短相应时间.
缓存静态内容:在http头信息中,cache-control属性表示缓存信息。
设置cache-control属性,可以在IIS管理器中设置cache-control的值,还可以在Web.Config文件中配置:

<system.webserver>
    <staticContent>
        <clientCache cacheControlAge="usage" cacheControlMaxage="365.00:00:00"/>
    </staticContent>
</system.webserver>

在后面还可以为特定的静态资源,设置更短的时间。

关闭游览器缓存

可以为特定的静态资源关闭浏览器缓存,可以在IIS中设置,也可以在Web.Config文件中配置:

<location path="image.jpg">
    <system.webserver>
        <staticContent>
            <clientCache cacheControlMode="DisableCache"/>
        </staticContent>
    </system.webserver>
</location>

缓存动态内容

在ASPX页面中使用声明方式实现缓存,设置过期时间:
<%@outputcache Duration="86400" Location="client" VaryByParam="None"%>
这句话在运行时中会生成Http头,让浏览器缓存86400秒(1天),还必须设置VaryByParam="None"属性,表明该页面的多个版本不需要独立缓存。
还可以通过编程方式设置,在后置代码或者httpModule中:

void SetCache()
{
    this.Response.Cache.SetExpires(DateTime.Now.AddDays(1));//可以忽略
    TimeSpane ds = new TimeSpane(1,0,0,0);
    this.Response.Cache.SetMaxage(ds);//关键代码
}

使用缓存配置
在Web.Config文件中配置一个缓存,然后可以在ASPX里面outputcache中使用:

<system.web>
    <caching>
        <outputcachesetting>
            <outputcacheprofiles>
                <add name="cacheDay" duration="86400" location="client" varyByParam="none"/>
            </outputcacheprofiles>
        </outputcachesetting>
    </caching>
</system.web>

 

Web.Config 对静态文件 js css img 的客户端缓存策略

标签:

原文地址:http://www.cnblogs.com/micro-chen/p/5871056.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!