浏览器缓存的好处:
- 提升请求响应速度
- 提升用户体验
- 降低服务器带宽占用
- 降低服务器资源占用
缓存内容的对比:
缓存过期后,会请求源服务器上的内容,如果缓存内容不变,则更新缓存时间,不更新缓存内容
浏览器和服务器之间的通讯方式,主要是HTTP协议。内容的缓存策略,都在HTTP标头中。
强缓存 VS 协商缓存(协商缓存,也称为对比缓存)
- 强缓存:没有向服务器发起请求
- 协商缓存:向服务器发起了请求
强缓存实现:
用到了:expires,expires有个问题:浏览器时间可能和服务器时间不一样
所以后来又引进了:cache-control
cache-control,是由服务器来设置响应头来决定的,前端不需要任何操作
- privite:内容私有,只能在浏览器缓存,不能在代理服务器中缓存
- public:内容可以在任何位置缓存,比如代理服务器
- no-store:表示内容不可以被任何人缓存
- no-cache:表示内容可以被缓存,但是客户端每次必须请求服务器,进行内容校验
no-cache,代表浏览器已经缓存了,但是下次再请求的话,要去服务器验证,会携带请求首部 if-none-match或if-modified-since,服务器发现没过期的话返回304,浏览器就直接使用本地缓存,如果过期了,返回200以及整个资源,另外还有两个响应首部 last-modified或etag,浏览器收到后会更新本地缓存 - max-age:表示缓存内容的过期时间,单位是秒
- s-max-age:共享缓存内容的过期时间,代理服务器会使用该时间
- max-age和s-max-age如果同时存在,则浏览器会使用max-age,代理服务器会使用s-max-age
- must-revalidate:在某些情况下,服务器无法访问,浏览器会使用缓存内容;但如果内容已经过期超过了cache-control中的max-age的时间,则必须请求服务器。告诉浏览器、缓存服务器,本地副本过期前,可以使用本地副本;本地副本一旦过期,必须去源服务器进行有效性校验。
- proxy-revalidate:作用和must-revalidate基本相同,不过是应用于代理服务器
使用何种缓存?看情况而定:
协商缓存(又叫做:对比缓存),是一种缓存策略:
协商缓存实现:
用到了:Last-Modified 和 ETag
缓存分为:强缓存和协商缓存
- 强缓存:在缓存没有过期的时候,浏览器可以直接决定使用缓存
- 协商缓存:顾名思义,有个协商的过程,当缓存过期以后,浏览器需要咨询服务器:是否可以继续使用缓存?服务器返回可以使用或者不可以使用。因为有个协商的过程,所以叫做协商缓存。