HTTP缓存机制
缓存的作用
- 提高资源加载速度
- 减少网络请求,提高页面渲染速度
缓存的分类
前端缓存主要包括http缓存,数据缓存
HTTP缓存
常见的 HTTP 缓存只能存储 GET 响应,对于其他类型的响应则无能为力。
浏览器在每次GET URL时都会先检查URL对应的缓存,除非你指定不使用缓存(强制刷新或者在控制台勾选Disable Cache等)
HTTP缓存流程图
优先级
强缓存
不请求服务器,直接用,返回状态码200
- Pragma
包括实现特定的指令,它可应用到响应链上的的任何接收方no-cache
指定不缓存响应,即资源不缓存;
不直接询问浏览器缓存情况,向服务器验证当前资源是否更新,因此有的时候只设置no-cache防止缓存还是不够保险,还可以加上private指令,将过期时间设为过去的时间。no-store
绝对缓存,每次请求都会请求服务端 - Cache-Control
显示是否可以缓存及其缓存类型max-age
&s-maxage
max-age(单位为s)指定设置缓存最大的有效时间,定义的是时间长短。当第一次访问服务器的时候,返回一个max-age,在max-age这段时间内,客户端不会在访问服务器获取该资源。
s-maxage用于共享缓存(比如CDN),s-maxage也叫代理缓存,优先级高于max-agepublic
&private
public表示该资源可以被多个用户共享,当没有指定public还是private的时候,默认是public
private响应只作为私有的缓存,不能在用户间共享,如果要求认证,响应会自动设置为privateno-cache
&no-store
no-cache
指定不缓存响应,即资源不缓存;
不直接询问浏览器缓存情况,向服务器验证当前资源是否更新,因此有的时候只设置no-cache防止缓存还是不够保险,还可以加上private指令,将过期时间设为过去的时间。no-store
绝对缓存,每次请求都会请求服务端 - Expires
响应过期的日期和时间(服务器的绝对时间)
Expires是一个时间戳,当客户端再次请求资源的时候,会吧客户端的时间与时间戳相比,如果过期了,则会访问服务端的资源,不会访问缓存资源
协商缓存
请求服务器,服务器同意了才用,返回状态码304
当浏览器检测某个资源请求没有强缓存,就会发起一个请求到服务器,验证是否存在协商缓存,如果存在协商缓存就回家返回http状态为304,并且会显示一个not modified的字符串
协商缓存是利用的是【Last-Modified
,If-Modified-Since
】和【ETag
、If-None-Match
】这两对Header来管理的
- last-Modified
服务器端文件的最后修改时间,需要和cache-control
共同使用,是检查服务器端资源是否更新的一种方式。当浏览器再次进行请求时,会向服务器传送If-Modified-Since
报头,询问Last-Modified
时间点之后资源是否被修改过。如果没有修改,则返回码为304
,使用缓存;如果修改过,则再次去服务器请求资源,返回码和首次请求相同为200
,资源为服务器最新资源。 - ETag
ETag
就像一个指纹,资源变化都会导致ETag
变化,跟最后修改时间没有关系,ETag
可以保证每一个资源是唯一的;可以理解为ETag是一个可以与Web资源关联的记号(token)If-None-Match
的header
会将上次返回的ETag
发送给服务器,询问该资源的ETag
是否有更新,有变动就会发送新的资源回来;如果ETag没有变动,则返回状态码304