元宵佳节，好吃嘴存脂肪，浏览器存文件

俗话说：二月不减肥，三月徒伤悲，四月路人雷，五月男友没，六月被晒黑,七月被不知谁，八月待室内，九月更加肥！十月相亲累，十一月无人陪，十二月无三围，一月肉更肥。

二月已经过去了，年也即将过去了，可是脂肪还在那，只增不减，那就先干碗元宵，攒够了劲再减肥吧！

过年中缓存下的脂肪真的是一种深深的伤害，而我们每天接触的浏览器却不是这样看待缓存的。缓存机制可以让我们的浏览器跑的更快，更欢型。这是因为客户端和浏览器建立连接时需要消耗时间，而大的响应需要在客户端和服务器之间进行多次往返通信才能获得完整的响应，这就拖延了浏览器可以使用和处理内容的时间。

一、浏览器端的缓存规则

对于浏览器端的缓存来讲，这些规则是在HTTP协议头和HTML页面的Meta标签中定义的。他们分别从新鲜度和校验值两个维度来规定浏览器是否可以直接使用缓存中的副本，还是需要去源服务器获取更新的版本。

新鲜度（过期机制）：也就是缓存副本有效期。一个缓存副本必须满足以下条件，浏览器会认为它是有效的，足够新的：

● 含有完整的过期时间控制头信息（HTTP协议报头），并且仍在有效期内；

● 浏览器已经使用过这个缓存副本，并且在一个会话中已经检查过新鲜度

满足以上两个情况的一种，浏览器会直接从缓存中获取副本并渲染。

校验值（验证机制）：服务器返回资源的时候有时在控制头信息带上这个资源的实体标签Etag（Entity Tag），它可以用来作为浏览器再次请求过程的校验标识。如发现校验标识不匹配，说明资源已经被修改或过期，浏览器需求重新获取资源内容。

二、HTTP缓存机制

当一个用户发起一个静态资源请求的时候，浏览器会通过以下几步来获取资源：

1、本地缓存阶段：先在本地查找该资源，如果有发现该资源，而且该资源还没有过期，就使用这一个资源，完全不会发送http请求到服务器；

●Expires

指定缓存到期GMT的绝对时间，如果设了max-age，max-age就会覆盖expires。如果expires到期需要重新请求。

●Cache-Control

对已缓存的内容进行控制：

cache-control: public表示缓存的版本可以被代理服务器或者其他中间服务器识别。

cache-control: private意味着这个文件对不同的用户是不同的。只有用户自己的浏览器能够进行缓存，公共的代理服务器不允许缓存。

cache-control: no-cache意味着文件的内容不应当被缓存。这在搜索或者翻页结果中非常有用，因为同样的URL，对应的内容会发生变化。

其他相关控制字段：

max-age:指定缓存过期的相对时间秒数，max-ag=0或者是负值，浏览器会在对应的缓存中把Expires设置为1970-01-01 08:00:00。

s-maxage:类似于max-age，只用在共享缓存上，比如proxy。

public:通常情况下需要http身份验证的情况，响应是不可cache的，加上public可以使它被cache。

no-cache:强制浏览器在使用cache拷贝之前先提交一个http请求到源服务器进行确认。no-store: 告诉浏览器在任何情况下都不要进行cache，不在本地保留拷贝。

must-revalidate:强制浏览器严格遵守你设置的cache规则。

proxy-revalidate:强制proxy严格遵守你设置的cache规则。

cache:使用本地缓存，不发生请求。

2、协商缓存阶段：如果在本地缓存找到对应的资源，但是不知道该资源是否过期或者已经过期，则发一个http请求到服务器,然后服务器判断这个请求，如果请求的资源在服务器上没有改动过，则返回304，让浏览器使用本地找到的那个资源；

●Last-Modified & if-modified-since

Last-Modified与If-Modified-Since是一对报文头，属于http 1.0。

last-modified是WEB服务器认为对象的最后修改时间，比如文件的最后修改时间，动态页面的最后产生时间。

●ETag & If-None-Match

ETag与If-None-Match是一对报文，属于http 1.1。ETag是一个文件的唯一标志符。就像一个哈希或者指纹，每个文件都有一个单独的标志，只要这个文件发生了改变，这个标志就会发生变化。ETag机制类似于乐观锁机制，如果请求报文的ETag与服务器的不一致，则表示该资源已经被修改过来，需要发最新的内容给浏览器。同时使用这两个报文头，在完全匹配If-Modified-Since和If-None-Match即检查完修改时间和Etag之后，如都与服务器的相符，服务器返回304，否则，发送最新内容给浏览器。

Etag 主要为了解决 Last-Modified 无法解决的一些问题：

① 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET；

② 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)；

③ 某些服务器不能精确的得到文件的最后修改时间。

●其他标签

Content-Length：尽管并没有在缓存中明确涉及，Content-Length头部在设置缓存策略时很重要。某些软件如果不提前获知内容的大小以留出足够空间，则会拒绝缓存该内容。

Vary：缓存系统通常使用请求的主机和路径作为存储该资源的键。当判断一个请求是否是请求同样内容时，Vary头部可以被用来提醒缓存系统需要注意另一个附加头部。它通常被用来告诉缓存系统同样注意Accept-Encoding头部，以便缓存系统能够区分压缩和未压缩的内容。

3、缓存失败阶段：当服务器发现请求的资源已经修改过，或者这是一个新的请求(在本来没有找到资源)，服务器则返回该资源的数据，并且返回200， 当然这个是指找到资源的情况下，如果服务器上没有这个资源，则返回404。

三、用户操作行为与缓存

四、HTML5缓存思路

1、HTML5离线应用缓存manifest

● 用户可离线访问你的应用，这对于无法随时保持联网状态的移动终端用户来说尤其重要

● 用户访问本地的缓存文件，通常意味着更快的访问速度

●仅仅加载被修改过的资源，避免同一资源对服务器多次的请求，大大降低了对服务器的访问压力

2、localStorage

生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

3、sessionStorage

仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。