`
newleague
  • 浏览: 1499307 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

add expires header 如何缓存以加快访问速度

 
阅读更多
add expires header
http://cache.baidu.com/c?m=9d78d513d9940bed03adc33f1a16a63c4e07d6347cc3975521dbc90ed5264c40347bfee17c3510738396273146b8492bbbad696f635d74f1cf8bcd0089a6c27672dd3a6f364bd95c16d248ae9f4724c72a9750bfab1becb0a33790f9d1d3880344ca245f3cdfae&p=8c49cc15d9c34be534be9b785c4b&user=baidu&fm=sc&query=Expires+Header&qid=f83dc9e211772aaf&p1=12

法则3:增加Expires Header  Add an Expires Header


  在您设计网页时,快速的响应时间不应该是你唯一要考虑的,如果仅仅是这样,那我们采用法则1,把我们的页面设计成一个极端的网页:没有任何图片,script,样式表。我们都明白,图片、script、样式表这些组件可以增强用户体验,虽然它们会给页面带来较长的载入时间。你幸运了,在这一章介绍的法则3,我就要向你介绍如何最大限度地利用浏览器的缓存来使这些页面组件更高效的为我们的页面服务。

  现在的网页所包含的组件越来越丰富,java applet去了,Flash来了,script也不可缺少,随着div的大潮,css样式表也少不了...... 所以用户若第一次访问您的网页,则可能会产生多个HTTP请求;但如果您在请求返回中使用Expires头信息,则可以缓存这些组件,避免在随后的访问中产生不必要的HTTP请求,Expires头信息最常用于图片,其实它适合应用在所有的组件中,如scripts,样式表和Flash。但大多数当今的热门网站目前并没有这样做。在这一章节中我会提及如何让这些网站可以更快。在使用Header头信息时,也可能会有一定的额外开销,这点会在 "改变文件名"段落中再详谈.


Expires Header

  浏览器使用缓存来减少HTTP请求数和减少HTTP的响应数据量,以达到更快的加载页面。web服务器通过Expries header来告诉web客户端(John:主要是浏览器)当前返回的组件在我指定的时间以前都是可用的,你(浏览器)可以留着下次备用(John:有点像我们在超市买牛奶时,随包装袋上返回的过期日期)。Expries header 在HTTP规范中描述为 "the date/time after which the response is considered stale.",它附带在HTTP的响应中返回给客户端。
  如上图,这是一个典型的expries header ,它告诉浏览器,直到2010年4月15日这个请示的返回都不会变化。如果这个头信息是随着一个图片返回的,那浏览器就会缓存这个图片,以为其后的页面浏览直接使用,以减少一个HTTP请示。


Max-Age and mod_expires

  在我解释缓存是如何更好的提升性能之前,有必要介绍一下与Expries header相关的几个头信息。Cache-Control header是在HTTP/1.1中被引入以弥补Expries header的不足。因为Expries header使用的是一个具体的日期,它就要求服务器与客户端之间要有严格的时钟检查,并且当过期日期到来之后,服务器端还必须配置一个新日期。

  相反,Cache-Control 使用max-age来指定一个时间段来标识一个组件能使用多长时间。这个max-age是以秒为单位来描述的(John:有点保质期的概念)。如果在这个保质期内,这个组件再被请求,浏览器就直接使用缓存里的就行了。下面就是一个返回10年保质期的头信息。
  使用Cache-Control虽然弥补了Expires的不足,但我们仍然还是得使用 Expires header以兼容那些不支持HTTP/1.1的浏览器(尽管这些流量可能还不到1%)。所以我们一般同时使用Expires和Cache- Control max-age,按HTTP规范这时会以max-age的时间为优先考虑,所以我们还是避免不了服务器与客户端之间的时钟检查和服务器端的新日期配置。

  幸运的是我们有Apache的 mod_expires模块,能让我们像设置max-age那样来配置Expires header,它使用ExpiresDefault来设置一个时间段,如下,为图片,scripts和样式表设置10年的有效期:
<FilesMatch "\.(gif|jpg|js|css)$">
     ExpiresDefault "access plus 10 years"
</FilesMatch>
  这个时间可以是年,月,周,天,小时,分钟甚至是秒。使用了这个模块,所有的响应返回中就会同时带着 Expires header 和 Cache-Control max-age 头信息:
  其中Expires header所携带的过期时间具体是多少,则依赖于每个客户端什么时间发出的请求,在上面的例子中,始终是10年。这样就避免了我们每次在到期后都要重新设置服务器,mod_expires会搞定一切。

  图3-1是对10大网站使用这些headr的一个调查。有7家使用了这些header,其中有5家同时使用了
Expires 和 Cache-Control max-age(John:推荐)。各有2家分别只使用 Expires 或Cache-Control max-age。很遗憾有3家什么也没使用。

Empty Cache vs. Primed Cache

  使用Expires  header只会影响已经访问过的页面和组件,当用户第一次访问您的页面时无法避免的会有比较多的HTTP请求数,因为这时浏览器的缓存里是空的。所以如果您的网站能吸引用户访问更多的页面, 并经常在此停留,我们所做的缓存工作才有效果。

不仅仅是图片 More Than Just Images

  一般Expires header常用于图片,其实这并不是最佳实践。Expires header应该应用于所有那些不经常变动的组件,script,样式表或Flash组件。

  在理想情况下,所有组件都在一个页面内,并且都有一个未过期的Expries header,而随后浏览的页面只一个对HTML源文件的HTTP请求,其余的组件都在浏览器的缓存中直接提供,这时的响应时间会提高50%甚至更多。

  我调查了美国的10大网站,并记录了其中有多少图片,script和样式表是设置了至少30天有效期的Expires 或是 Cache-Control max-age header,如表3-2所示,情况并不是太好,图中所列的是被缓存至少30天的组件数,分母是该网站上的所有的该类型组件数,分子是被加了过期 header的组件数。
  • 有5家网站把大多数图片的缓存有效期设为30天以上.
  • 有4家网站把大多数样式表的缓存有效期设为30天以上.
  • 有2家网站把大多数script的缓存有效期设为30天以上.
  从上图的百分比中俺发现有74.7%的组件没有被缓存或是有效期低于30天。一种解释就是这些组件因为业务关系而不应该被缓存,如新闻网站 CNN.com就是个例子,138张图片中没有一张被缓存,这是因为很多新闻照片要被不断更新而不必缓存在用户端,所以这时更适合用Last- Modified heade,来通过组件的最后修改时间判断是否要读取新数据。

  表3-2的最后一项,显示了未被缓存的组件的最后修改时间的中分线,就CNN.com来说有一半的未缓存组件的最后修改时间是在227天前了,很显然这些组件是应该被缓存的。

  这种情况也曾发生在Yahoo!,在过去,Yahoo!并没有缓存script,样式表和一些图片,是因为我们认为这样是经常变化的,用户有必要每次访问时都去请求一次以获取最新的。可问题是,在实际应用中,这些组件并不是我们想像中的那样要经常变化更新,我意识到应该把它们缓存来提升用户体验。后来,Yahoo!选择了去缓存它们,哪怕会带来一些额外的开发花销,这就是我马上要谈到的Revving Filenames。

改变文件名 Revving Filenames

  如果我们已经为组件设置了缓存,可当这些组件又需要更新时,用户如何才到得到最新的组件呢?由我们前面介绍的Expires 或是 Cache-Control max-age header 都会让浏览器不检查任何改变,直接从本地硬盘中读取缓存,除非是过了有效期。所以我们能做的,就是在HTML页面中改变这个组件的文件名。在Mark Nottingham的文章"Caching Tutorial for Web Authors and Webmasters"谈到这个问题:

  最优的方案还是改变它们的链接;只有这样,用户才能从服务器上获取更新。(The most effective solution is to change any links to them; that way, completely new representations will be loaded fresh from the origin server.)
 
  说白了,还是要改变文件名。在已有的页面中改变文件名可能是件头疼的烦事,但是,不得不这样,如果您使用的是PHP,Perl等动态的页面,不妨利用一个变量为所有的组件命名,这样换起文件名来比较省事。在Yahoo!,我们是在组件名后面跟上版本号(如,yahoo_2.0.6.js),把这个版本号做为一个变量写在程序中,真的很省事。


举例 Examples

  下面的两个链接,包包含有相同的组件:6个图片,3个script和1个样式表。第一个链接没有任何Expires header,而第二个链接,全有。
  No Expires
     http://stevesouders.com/hpws/expiresoff.php
  Far Future Expires
    http://stevesouders.com/hpws/expireson.php
  我在900Kbps的DSL下测试,加了过期头设置的链接页面访问时间会减少600~260毫秒,能提升57%,如果页面的组件再多一点,这个百分比还会更高。

  要说明一点,并不是说没有加过期头的组件就不会被浏览器缓存,它们也会被缓存,还记得我在Chapter B 中介绍的有条件的GET请求吗,只不过,会多一个HTTP请求到服务器端以询问这个组件是否有效,如果这个组件的最后修改时间和以前一下,则直接使用缓存中的版本,HTTP返回中将不带这个组件的具体数据了。

  为您页面上的组件贴上保质期吧,再加有有条件的GET请求,带来的会是减少近一半的HTTP请求数还有不必要的数据传输。
分享到:
评论

相关推荐

    Loadrunner负载测试 浏览器缓存设置

    这时可以使用`web_add_header()`函数来添加自定义的HTTP头,如`Cache-Control`、`Pragma`和`Expires`,以控制资源的缓存行为。 5. **清理缓存**:在测试的不同阶段,可能需要清除缓存以模拟用户清空缓存后的行为。...

    页面缓存处理方案文档,解决前后端页面缓存

    页面缓存处理是提高Web应用性能的关键策略,它能够减少服务器压力,加快用户访问速度。本文档主要讨论了如何处理页面缓存,确保前端逻辑和资源更新后立即生效,无需额外操作。 首先,我们来看前端处理方案。在HTML...

    jsp清除各种缓存

    然而,在某些情况下,我们需要清除缓存以确保用户获取到最新的数据。本文将详细介绍如何在JSP(JavaServer Pages)环境中清除不同类型的缓存,包括HTTP缓存、Cookie缓存以及Session缓存。 #### 二、清除HTTP缓存 ...

    静态文件访问不到报No Access-Control-Allow-Origin处理办法

    `expires max`用来设置长期缓存,减少客户端对这些文件的重复请求,提高页面加载速度。`access_log off`关闭了针对这个location的日志记录,以优化服务器性能。 在修改Nginx配置后,记得重启Nginx服务以使新配置...

    nginx expires控制页面缓存

    在网页加载速度优化方面,合理利用HTTP缓存是一种重要的技术手段,而Nginx的expires指令正是用来控制HTTP应答中的“Expires”和“Cache-Control”头部信息,从而达到控制页面缓存的效果。 expires指令可以让服务器...

    vue项目强制清除页面缓存的例子

    - 对于静态文件(如图片、CSS、JavaScript等),设置合理的缓存时间,以减少服务器负载并加快页面加载速度。示例如下: ```nginx #前端静态文件 location ~*\.(gif|jpg|jpeg|png|css|js|ico|eot|otf|fon|font|...

    面试题缓存策略的选择篇.pdf

    `add_header` 指令用于添加状态码为2XX和3XX的响应头信息,可以设置 `Pragma`、`Expires`、`Cache-Control` 等响应头,这些响应头信息可以被浏览器识别并用于缓存控制。`expires` 指令通知浏览器资源过期时间,通过...

    详解Nginx服务器中HTTP Headers相关的模块配置使用

    add_header可以用来标示请求访问到哪台服务器上,这个也可以通过nginx模块nginx-http-footer-filter研究使用来实现。expires指令用来对浏览器本地缓存的控制。 二. add_header指令 语法: add_header name value; ...

    nginx TOMCAT 文件下载 上传 进度条 缓存

    add_header Cache-Control public; # 设置缓存控制头 proxy_cache my_cache; # 使用名为my_cache的缓存区 proxy_cache_bypass $http_pragma; # 遵循Pragma头,避免缓存 proxy_cache_revalidate on; # 刷新缓存时...

    讲解Nginx服务器中设置本地浏览器缓存的简单方法

    在现代互联网应用中,浏览器缓存是一种优化技术,它能够缓存用户的资源请求,以减少服务器的负载,加快网页的加载速度,同时降低网络带宽的消耗。在Web服务器中,Nginx是一个高性能的HTTP和反向代理服务器,它也可以...

    Nginx搭建图片服务器(静态资源缓存服务器).zip

    在构建Web服务时,Nginx因其高性能、轻量级和...总的来说,通过Nginx搭建图片服务器并实现静态资源缓存,可以显著提升用户访问速度,减轻后端服务器压力,同时提供了一种高效、可靠的解决方案来处理高并发的图片请求。

    nginx作为http图片服务器示例

    最后,`expires`和`add_header`用于设置HTTP缓存,加快客户端的二次访问速度。 部署完成后,用户可以通过HTTP协议访问`example.com`来查看图片,如`http://example.com/image.jpg`。由于Nginx的高性能特性,即使...

    JSP实现屏蔽浏览器缓存的方法

    简单来说,当用户访问一个网页时,浏览器会尝试从本地缓存中加载内容,如果本地已经有了缓存数据,就无需再次从服务器请求,这样可以加快网页的加载速度。然而,在数据频繁更新的动态网站上,这种缓存机制可能会导致...

    在(ASP/PHP/JSP/html/js)中禁止ajax缓存的方法集锦

    ajax缓存有好处,但也有坏处,缓存有时候会导致误操作,影响用户体验,若你的WEB项目不需要ajax缓存功能,可按下述方法来禁止ajax缓存。 一、在ASP中禁止ajax缓存: ‘放在ASP网页最开头部分  Response.expires=0 ...

    使用nginx缓存服务器上静态文件的设置方法

    add_header Cache-Control "public"; # 设置额外的HTTP头,指示缓存可以被存储和共享 } ``` 需要注意的是,Nginx的缓存策略允许我们为不同类型的响应码和文件类型定义不同的缓存时间,从而实现更灵活的缓存管理。...

    禁止页面缓存的几种方法分享

    在网页开发中,有时我们需要确保用户每次访问页面时都能获取到最新的内容,而不是浏览器缓存的旧版本。本文将详细探讨几种禁止页面缓存的方法,适用于不同编程语言环境。 首先,我们来看看HTML中的方法。在页面的...

    header中Content-Disposition的作用与使用方法

    response.setDateHeader("Expires", 0); 在某些情况下,这会使得在一些浏览器(如IE)上无法弹出下载对话框,导致下载功能失效。这是因为在禁止缓存的条件下,浏览器可能不会正常处理Content-Disposition头信息。 ...

    AJAX防止页面缓存的代码

    response.addHeader("Expires", "0"); ``` 这些代码片段的作用都是确保浏览器在处理AJAX请求时不会使用缓存的数据,而是每次都向服务器请求最新的内容。通过这种方式,用户可以实时看到页面的最新状态,避免因为...

    c# 注销按钮返回登录

    在实际开发中,可以将这段代码封装成一个函数或方法,并在注销操作触发时调用,以确保每次注销都能正确执行缓存清除逻辑。此外,还可以结合其他安全措施(如清除Cookie等)来增强系统的安全性。

    浅谈微信页面入口文件被缓存解决方案

    在前端开发中,缓存是一种优化页面加载速度的重要手段,然而它也会引发一系列问题,特别是在微信页面中。本文主要探讨的是微信页面入口文件被缓存的解决方案,这在微信浏览器中是一个尤为突出的问题。 首先,我们来...

Global site tag (gtag.js) - Google Analytics