浏览器缓存

缓存可以减轻服务器的压力，节省流量，提升性能与用户体验

浏览器缓存机制

若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)。

协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，返回200，重新返回资源和缓存标识，再存入浏览器缓存中；生效则返回304，继续使用缓存。

浏览器缓存的分类

强缓存

请求资源的时，如果是之前请求过的并使用强缓存，那么在过期时间内将不会发送本次请求向服务器获取资源，而是直接从浏览器缓存中获取（不管资源是否改动）。过期了将重新从服务器获取，并再次强缓存。

怎么设置强缓存：

我们第一次进入页面，请求服务器，然后服务器进行响应，浏览器会根据response Header来判断是否对资源进行缓存，如果响应头中expires、pragma或者cache-control字段，代表这是强缓存，浏览器就会把资源缓存在memory cache 或 disk cache中

1》expires

是HTTP1.0控制网页缓存的字段

值为一个时间戳，服务器返回该请求结果缓存的到期时间，意思是，再次发送请求时，如果未超过过期时间，直接使用该缓存，如果过期了则重新请求

有个缺点，就是它判断是否过期是用本地时间来判断的，本地时间是可以自己修改的

2》pragma

HTTP1.0中禁用网页缓存的字段，其取值为no-cache

3》cache-control

是HTTP1.1中控制网页缓存的字段，客户端缓存资源，但是是否缓存需要经过协商缓存来验证

Cache-Control的no-cache效果一样，不进行强缓存

它的取值：

public：资源客户端和服务器都可以缓存

privite：资源只有客户端可以缓存

no-cache：不进行强缓存，客户端缓存内容，是否使用缓存则需要经过协商缓存来验证决定

no-store：不使用缓存

max-age：缓存将在多少秒之后失效

协商缓存

请求资源时，如果是之前请求过的并使用协商缓存，还是发送请求到服务器，服务器通过逻辑判断确认资源没有修改返回304状态码（不会返回文档的主体），那么本次的资源则是从缓存中获取；如果经过判断确认资源被修改过，则重新发送资源到客户端，并且客户端更新缓存

协商缓存就是强缓存失效后，浏览器携带缓存标识向服务器发送请求，由服务器根据缓存标识来决定是否使用缓存的过程

是否走协商缓存是根据响应头:

一、Last-Modified /If-Modified-Since

Last-Modified：服务器响应请求时，返回该资源文件在服务器最后被修改的时间

If-Modified-Since：客户端再次发起该请求时，携带上次请求返回的Last-Modified值，通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求，发现请求头含有If-Modified-Since字段，则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比，若服务器的资源最后被修改时间大于If-Modified-Since的字段值，则重新返回资源，状态码为200；否则则返回304，代表资源无更新，可继续使用缓存文件

有个问题就是以秒为单位，如果1秒内进行了多次更改，是不能够判断出来做出了更改的

二、Etag / If-None-Match

Etag：服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)

If-None-Match：客户端再次发起该请求时，携带上次请求返回的标识Etag值，服务器发现该请求头中含有If-None-Match，则会根据字段值与该资源在服务器的Etag值做对比，一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200

两者的优先级：

Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since，同时存在则只有Etag / If-None-Match生效

使用方案

一般项目的缓存方案：

HTML: 协商缓存；

css、js、图片：强缓存

缓存与刷新

1》当ctrl+f5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存。

2》当f5刷新网页时，跳过强缓存，但是会检查协商缓存。

3》 浏览器地址栏中写入URL-回车，浏览器发现缓存中有这个文件了，不用继续请求了，直接去缓存拿（最快）