HTTP 缓存

  HTTP       2016-01-16

在HTTP缓存的性能优化中,我们需要做的是使服务器返回准确的HTTP Response Header,以指导浏览器何时可以缓存响应以及可以缓存多久。

服务器在返回响应时,会同时返回一组HTTP Response Header头信息,用来描述内容类型、长度、缓存指令、验证令牌等;例如,在下图的交互中,服务器返回了一个 1024 字节的响应,指定客户端缓存响应长达 120 秒,并提供验证令牌(x234dff),在响应过期之后,可以用来验证资源是否被修改。

Response Header

缓存验证流程

假设现在我们请求“/index.html”页面:

(1)浏览器第一次访问服务器该资源,在浏览器中没有缓存文件,直接向服务器发送请求,服务器返回此页面,状态为:200 OK。在response header中可能会设置index.html页面的缓存过期时间、文件最后修改时间和根据index.html内容计算出来的实体标记Entity Tag,简称Etag。浏览器加载完成后将/index.html路径的请求缓存到本地。

(2)浏览器第二次访问服务器资源,于本地已经有了此路径下的缓存文件,所以这一次就不直接向服务器发送请求了。首先,进行缓存过期判断。浏览器根据(1)中设置缓存过期时间判断缓存文件是否过期。

  • 情景一:若没有过期,则不向服务器发送请求,直接使用缓存中的结果,此时我们在浏览器控制台中可以看到:200 OK(from cache) ,此时的情况就是完全使用缓存,浏览器和服务器没有任何交互;
  • 情景二:若已过期,则向服务器发送请求,此时请求中会带上(1)中设置的文件修改时间和Etag;

然后,进行资源更新判断。服务器根据浏览器传过来的文件修改时间,判断自浏览器上一次请求之后,文件是不是没有被修改过;根据Etag,判断文件内容自上一次请求之后,有没有发生变化:

  • 情形一:若两种判断的结论都是文件没有被修改过,则服务器就不给浏览器发index.html的内容了,直接告诉它,文件没有被修改过,你用你那边的缓存:304 Not Modified,此时浏览器就会从本地缓存中获取index.html的内容。此时的情况叫协议缓存,浏览器和服务器之间有一次请求交互。
  • 情形二:若修改时间和文件内容判断有任意一个没有通过,则服务器会受理此次请求,之后的操作同(1)。

头信息解读

Cache-Control
此属性有两个值:no-cache和no-store,前者表示使用缓存前必须要和服务器发送请求确认是否可以使用缓存,后者表示客户端和中继器(路由器等)禁止使用任何版本的缓存;

参考链接

本文最后更新于2016-01-23 08:17:59