浏览器缓存 Last-Modified / Etag / Expires / Cache-Control 详解

什么是浏览器缓存

浏览器缓存，又称 HTTP 缓存，指的是：当我们浏览网站的时候，器存储会在本地存储一个副本，以便下次访问同个网址的时候可以不再连接服务器，直接使用本地的缓存。服务器端程序可以通过 HTTP Cache Headers 来控制缓存行为，减轻服务器的负担，缩短了响应时间，显著得提高网站的性能。

HTTP Cache Headers

当服务器发出响应的时候，可以通过两种方式来告诉客户端（浏览器）如何处理缓存：

第一种是 Expires，比如：

Expires: Thu, 10 Dec 2015 23:21:37 GMT

在此日期之前，客户端都会认为缓存是有效的，第二次请求，浏览器不会连接服务器，直接从本地缓存中读取，比如下图：

HTTP Cache

不过 Expires 有缺点，比如说，服务端和客户端的时间设置可能不同，这就会使缓存的失效可能并不能精确的按服务器的预期进行。

第二种是 Cache-Control，比如：

Cache-Control: max-age=3600

这里声明的是一个相对的秒数，表示从现在起，3600秒内缓存都是有效的，这样就避免了服务端和客户端时间不一致的问题。

但是 Cache-Control 是 HTTP1.1 才有的，不适用与 HTTP1.0，而 Expires 既适用于 HTTP1.0，也适用于 HTTP1.1，所以说在大多数情况下同时发送这两个头会是一个更好的选择，当客户端两种头都能解析的时候，会优先使用 Cache-Control。

条件请求

Last-Modified / If-Modified-Since

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

Last-Modified: Mon, 30 Nov 2015 23:21:37 GMT

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

If-Modified-Since: Mon, 30 Nov 2015 23:21:37 GMT

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

HTTP304

ETag / If-None-Match

HTTP 协议规格说明定义 ETag 为“被请求变量的实体值”。 服务器单独负责判断记号是什么及其含义，并在 HTTP 响应头中将其传送到客户端，以下是服务器端返回的格式：

ETag: "d41d8cd98f00b204e9800998ecf8427e"

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

If-None-Match: W/"d41d8cd98f00b204e9800998ecf8427e"

如果ETag没改变，则返回状态304，内容为空，这也和Last-Modified一样。

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

开发者会把 Last-Modified 和 ETags 请求的 HTTP 报头一起使用，这样可利用客户端（例如浏览器）的缓存。因为服务器首先产生 Last-Modified/Etag 标记，服务器可在稍后使用它来判断页面是否已经被修改。本质上，客户端通过将该记号传回服务器要求服务器验证其缓存是否过期。