Http的Cache机制

由四个部分组成，Last-Modified（If-Modified-Since）、Etag（If-None-Match）、Cache-Control、Expires ，我会在下文更详细说明它们在Cache机制中的作用。

文章目录

Http的Cache机制
一、关于Web缓存
- 1.Web缓存-概念
- 2.Web缓存-作用
二、客户端缓存使用机制
三、服务端告知客户端缓存请求
总结

一、关于Web缓存

1.Web缓存-概念

Web缓存（即HTTP缓存），是指Web资源（如html页面，图片，js等）存在于Web服务器和客户端（浏览器）之间的副本。
Web缓存系统既可以指设备，也可以指计算机程序。

2.Web缓存-作用

其是被用于临时存储（即缓存）Web资源（如html页面，图片，JavaScript等），以减少服务器延迟，节约带宽（网络带宽会影响数据的提交与回发的速度）的一种信息技术。Web缓存系统会保存下通过这套系统传输的资源的副本；如果满足某些条件，则可以由缓存满足后续由Browser发出的请求。

二、客户端缓存使用机制

浏览器缓存体系分为两种结构，Last-Modified（If-Modified-Since）、Etag（If-None-Match）、Expires、Cache-Control四者参与其中。
在浏览器向服务器请求资源时，有以下两种情况：
客户端发送请求给服务器=>检查本地缓存=>发现本地无缓存（或不可用）=>请求服务器发送=>服务器返回静态资源=>呈现并缓存至本地;
和
客户端发送请求给服务器=>检查本地缓存=>发现本地有可用缓存=>反馈至服务器“有可用缓存”=>服务器自动返回状态码=>客户端调用缓存。
说简单些，就是请求到了资源或者请求到了“304你用缓存吧”这样请求到或者请求不到的区别，但是请求的机制依然分为两种，在这两种机制中也各自包含了自己的请求到和请求不到的情况。

下面介绍第一种机制：Last-Modified / If-Modified-Since机制
这种机制的工作原理是利用响应头Last-Modified获取Web组件的最近修改时间（即这部分资源最近一次缓存的时间），将其赋值给客户端发出的请求头If-Modified-Since，再向服务器进行请求，服务器会判定是使用告知使用缓存还是发送新资源。
结合上面说的请求到了和没请求到的情况，来写出请求的流程：
客户端需要发出请求 >>> 客户端将【由上次请求的响应头(Last-Modified-Since)获取的Web组件的最近更改时间】赋值给这次的请求头If-Modified-Since >>> 请求被发送至服务器询问是否发生改动 >>> 服务器根据请求头（If-Modified-Since）的Web资源更改时间来决定进行的操作（返回新的资源以及这次的更改时间或者自动返回304提示可调用缓存）
可想而知服务器进行判定的内容：如果传来的最后一次更改的时间早于服务器端最新一次资源更新的时间，那么就需要同步来更新资源，便发送新的资源；反之若是传来的最后一次更改的时间在最新一次资源更新后，那么客户端缓存的就已经是最新的资源，直接调用缓存不再需要传输数据。
接着介绍第二种机制：ETag/If-None-Match机制
这种机制的工作原理是利用响应头ETag获取Web组件的特征串（即这部分资源），将其赋值给客户端发出的请求头If-None-Match，再向服务器进行请求，服务器会判定是使用告知使用缓存还是发送新资源。
结合上面说的请求到了和没请求到的情况，那么请求的流程：
客户端需要发出请求 >>> 客户端将【由上次请求的响应头(ETag)获取的Web组件的特征率】赋值给这次的请求头If-None-Match >>> 请求被发送至服务器询问是否发生改动 >>> 服务器根据请求头（If-None-Match）的Web资源特征串来决定进行的操作（返回新的资源以及这次的特征串或者自动返回304提示可调用缓存）。

三、服务端告知客户端缓存请求

当服务器发出响应的时候，可以通过以下两种方式来告诉客户端缓存请求：

Expires：
其返回的是缓存的失效时间，只要当前时间在其返回的日期之前，客户端都会认为缓存是有效的。这也造成了这种方法的缺陷：一旦服务器端和客户端的时间设置不同就会造成无法在正确的时间将缓存失效。
Cache-Control，其返回缓存的有效期（时间段），表示从现在起，到未来某段时间内，缓存都是有效的，这样就避免了服务端和客户端时间不一致的问题。

总结

一开始只是对AJAX里setRequestHeader()参数的设置规则比较好奇，就去查了下…
如果这篇文帮到了您，我很荣幸。
如果您发现有不妥的地方，恳请您指点。

浏览器对缓存的使用规则相关推荐

max点缓存烘焙帧_深入理解浏览器的缓存机制
一.前言缓存可以说是性能优化中简单高效的一种优化方式了.一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷. 对于一个数据请求来说,可 ...
(转载)彻底理解浏览器的缓存机制
彻底理解浏览器的缓存机制 2018/04/16 概述浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制之前,我们先使用图文简单介绍一下 ...
虚拟机玩转缓存服务器,Nginx服务器中浏览器本地缓存和虚拟机的相关设置
自动列出目录配置: 下载过开源软件的都知道,一个很简单的页面列出了所有版本的源码包,这就是开启了自动列出目录如下配置,在虚拟主机location / {--}目录控制中配置自动列出目录: locat ...
案例解读：深入理解浏览器的缓存机制
0 前言浏览器缓存是前端性能优化的重要一环,对于前端效率提升的重要性,不言而喻. 之前对于浏览器缓存也是一知半解,这次借着H5页面缓存优化的东风整理了一下本地浏览器端的缓存机制,如强制缓存.协商缓存 ...
serversocket 返回浏览器图片_深入理解浏览器的缓存机制
戳蓝字「前端技术优选」关注我们哦! 一.前言缓存可以说是性能优化中简单高效的一种优化方式了.一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽 ...
【Web缓存机制系列】2 – Web浏览器的缓存机制
Web缓存的工作原理所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务(假设有副本可用的情况下,未被销毁回收或者未被删除修改).这些规则有的在协议中有定义(如HTTP协议1.0 ...
浏览器刷新+缓存原理
为什么要使用web缓存? Web缓存存在于服务器和客户端之间.Web缓存密切注视着服务器-客户端之间的通信,监控请求,并且把请求输出的内容(例如html页面. 图片和文件)另存一份:然后,如果下一个请 ...
客户端（浏览器）缓存
3.1 客户端缓存的缺点客户端缓存减少了的服务器请求,避免了文件重复加载,显著地提升了用户地方.但是当网站发生了更新的时候(如替换了css.js以及图片文件),浏览器本地仍保存着旧版本的文件,从而导 ...
浏览器协商缓存与强制缓存经典版
浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制之前,我们先使用图文简单介绍一下HTTP报文,HTTP报文分为两种: HTTP请求(R ...

浏览器对缓存的使用规则