浏览器缓存

24 Jun

Web缓存分为很多种,比如数据库缓存,代理服务器缓存,还有我们熟悉的CDN缓存,以及浏览器缓存。

缓存的重要性不用多说了吧,例如chrome会把缓存的文件保存在一个叫User Data的文件夹下,下次页面加载同样资源时,可以直接从本地读取,不必通过HTTP从服务器端再次下载资源,大大加快了页面的响应速度。

本篇主要介绍一下浏览器缓存:

  • HTTP Rresponse Header
    • Cache-Control
    • Expires
    • Last-modified
    • ETag
  • 实时更新缓存
  • 缓存策略

Cache-Control

Cache-Control用于定义资源的缓存策略。可以指定no-storeno-cachepublicprivatemax-gaes-maxage

no-store绝对禁止缓存,每次请求资源都要从服务器重新获取。常见于包含隐私数据或银行数据等场合。

no-cache表示不管max-age过不过期,每次都要向服务器重新验证资源是否被更改。只有服务器端确认资源未被修改后(如后面会介绍的Last-modified或ETag),才能使用本地缓存。

public(默认就是public)允许代理服务器缓存资源,以供多用户间共享。

private不允许代理服务器缓存该资源,用户间不共享,如HTTP认证响应会自动设为private

max-age缓存最大有效时间。单位是秒,从被请求时开始计时,这样可以避免时钟同步问题。因为原先用于缓存的Expires需要服务器和客户端时钟严格同步,因此HTTP 1.1引入了cache-control: max-age来避免时钟同步的限制。因此当cache-control: max-age和Expires同时出现,Expires将被忽略。

s-maxage只适用于共享缓存如CDN缓存。

如图服务器端收到请求后,在HTTP Rresponse Header里将cache-control: max-age=120,表示该资源的有效时间为2分钟。2分钟内客户端如需再次使用该资源,可以直接从本地读取,不需要再次向服务器发出请求了。

cache-control

Cache-Control的判断流程图:

cache-control

Expires

在HTTP1.1引入Cache-Control之前,用Expires设置缓存过期时间,告诉浏览器在过期时间前浏览器可以直接从本地读取资源,不必再次向服务器请求。

但HTTP1.1之后用Cache-Control取代了Expires,如果为了兼容性cache-control: max-age和Expires同时出现,Expires将被忽略

Last-modified

Last-modified是服务器告诉浏览器这个资源最后被修改的时间。

有什么用呢?例如浏览器根据cache-control: max-age或Expires发现缓存过期了,按理应该向服务器重新请求资源。但如果资源内容其实没有变,重新请求资源太浪费了,用Last-modified可以优化这个过程。

在有Last-Modified的情况下,浏览器会发送If-Modified-Since请求,服务器端比对请求里Last-modified时间和资源文件最后被修改时间是否一致。如果一致,服务器端回复304 Not Modified,这样浏览器就能继续使用本地的过期缓存了,节约了带宽。如果不一致,服务器回复200 OK,重新发送资源给浏览器。

Last-modified作为一种优化手段,需要和cache-control: max-age或Expires共同使用。

ETag

Last-modified作为一种优化手段,还不够完美,有时会有一些问题:

  1. 某些服务器不能精确得到资源的最后修改时间
  2. 如果资源修改非常频繁,在秒以下的时间内进行修改,而Last-modified只能精确到秒
  3. 一些资源的最后修改时间变了,但其实内容没改变

因此引入了ETag作为Last-modified的进阶版来解决上面这些问题。服务端根据实体内容生成一段hash字符串,用以标识资源的状态。具体生成的hash字符串服务器有自己的规范,如Apache中,默认是对文件的索引节(INode),大小(Size)和最后修改时间(MTime)进行hash后得到的。例如Etag: “5483ec7b-7c52”

ETag的原理和Last-modified类似,虽然浏览器根据cache-control: max-age或Expires发现缓存过期了,但如果资源其实没有变的话,重新请求有点浪费。用ETag可以优化这个过程。

在有ETag的情况下,浏览器会发送If-None-Match请求,服务器端将请求里ETag字符串和资源文件的ETag字符串进行比较。如果一致,服务器端回复304 Not Modified,这样浏览器就能继续使用本地的过期缓存了,节约了带宽。如果不一致,服务器回复200 OK,重新发送资源给浏览器。

ETag作为Last-modified的进阶版,同样需要和cache-control: max-age或Expires共同使用。而且当ETag和Last-modified同时存在时,Last-modified会被忽略。因此如果ETag匹配失败,即使缓存的Last-Modified没失效,也得到不到304 Not Modified。

如下图,浏览器发现cache-control: max-age=120过期了,就向服务器发送If-None-Match请求,服务器发现资源未被修改过,因此回复304 Not Modified通知浏览器继续使用本地缓存

ETag

ETag的问题在于使用网站服务器会使用资源的某些属性来构造它,但对于拥有多台服务器的网站,如Apache和IIS使用的属性不同,导致生成的hash值不同,会大大降低验证的成功率。结果是,对于完全相同的资源,当浏览器从Apache上获取了资源,又向IIS发起Get请求,ETag是不会匹配的。用户就无法收到更小更快的304,而是收到200正常去下载该资源。

如在多台服务器上寄宿你的网站,且你使用默认ETag配置的Apache或IIS,那么效率问题你必须面对。例如Apache用FileETag可从ETag中移除inode值,只留下大小和时间撮作为组件的ETag。IIS也有类似的ChangeNumber只留下时间撮作为组件的ETag。当然也可以彻底移除ETag,如Apache上FileETag none

整体缓存的过程:

cache-control

实时更新缓存

如果你改动了某资源,如CSS,但用户本地的cache-control: max-age或Expires时间未到,用户仍旧会使用旧的CSS。除非缓存过期,或用户清理了浏览器缓存,否则你修改的资源文件是没有办法第一时间通知到用户的。

如果想要实现,只能修改资源文件路径,例如将CSS文件名重命名为xxx-v2.css等。以此强制用户重新加载最新版资源。

缓存策略

可以为不同类型的资源文件定制不同的缓存策略,如下图:

cache-hierarchy

HTML文件必须确保最新,因此定义成no-cache,这样每次请求都会验证该HTML文件是否最新

JS和CSS文件因为经常会被修改,因此文件名嵌入指纹码(也可以是版本号或时间戳)。每次修改文件后文件名均不同,相当于HTML里加载不同的文件,强制用户下载最新版。由于文件名里嵌入了指纹码,可以放心大胆地将max-age设置1年。

JS里标记为private,因为JS里可能会包含一些私人数据。

图片因为不常变,所以文件名不必包含指纹码,可以根据需要设置max-age

最后配合ETag可以使得缓存机制更高效。

 

评论(1)

  1. Pingback: HTTP缓存 – LinZhy

Leave a Reply

Your email address will not be published. Required fields are marked *