浏览器HTTP缓存机制和缓存规则解析

17-10-12 来源：[db:作者]

收藏我要投稿

请求一个静态文件的时候（图片，css，js）等，这些文件的特点是文件不经常变化，将这些不经常变化的文件存储起来，对客户端来说是一个优化用户浏览体验的方法。那么这个就是客户端缓存的意义了。

Http 缓存机制作为 web 性能优化的重要手段，很多同学仅仅只是知道浏览器会对请求的静态文件进行缓存，但是为什么被缓存，缓存是怎样生效的，却并不是很清楚。

我们先来看看RFC2616规定的47种http报文首部字段中与缓存相关的字段，事先了解一下能让咱在心里有个底：

通用首部字段（就是请求报文和响应报文都能用上的字段）
这里写图片描述

请求首部字段
这里写图片描述

响应首部字段
这里写图片描述

实体首部字段
这里写图片描述

设置浏览器缓存有下面几种方法

Expires：本地缓存目录中，文件过期的时间（由服务器指定具体的时间）

Cache-control：本地缓存目录中，文件过期的时间（由服务器指定过期的间隔时间，由于浏览器根据间隔生成具体的时间）

Last-Modified：服务器上文件的最后修改时间

Etag：文件标识

HTTP缓存有多种规则，根据是否需要重新向服务器发起请求来分类，我将其分为两大类(强制缓存，对比缓存)

在详细介绍这两种规则之前，先通过时序图的方式，让大家对这两种规则有个简单了解。

已存在缓存数据时，仅基于强制缓存，请求数据的流程如下：

这里写图片描述

已存在缓存数据时，仅基于对比缓存，请求数据的流程如下：

这里写图片描述

我们可以看到两类缓存规则的不同，强制缓存如果生效，不需要再和服务器发生交互，而对比缓存不管是否生效，都需要与服务端发生交互。

两类缓存规则可以同时存在，强制缓存优先级高于对比缓存，也就是说，当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行对比缓存规则。