在前端开发中,我们主要追求的是性能和用户体验。对于一个网站查看性能最简单的方式就是打开网站的速度。而一个好的缓存策略可以大大提升网站的性能。使得已经下载后的资源被重复利用。减少客户端和服务器之间的请求次数,减少带宽,减少网络负荷。
对于web缓存,主要是针对一些web资源(html、 js、图片、数据等),就是介于web服务器和浏览器之间的文件数据副本。当我们第一次打开某一个网页时,浏览器向服务器发起请求,请求所需要的资源。如果我们使用了web缓存,当我们下一次再次访问该网站页面的时候,我们可以根据一些缓存策略,来决定是否直接使用缓存中的一些资源,还是再次向服务端发起请求,从而避免再次向服务器发起请求,减少客户端和服务器之间通信的时延。
对于浏览器端的缓存来说,规则是在http协议头和html的mate标签中定义的,他们分别从过期机制和校验值来判断是否直接使用该缓存,还是需要从服务器去获取更新的版本。
1.新鲜度(过期机制):也就是缓存副本的有效期。一个缓存副本必须满足以下条件之一,浏览器才会认为它是有效的,足够新的,才会直接使用缓存。
2.校验值(验证机制):服务器相应中,在响应头中存在Etag标签,用来验证资源是否更改的标识,如果缓存的标识和服务器的标识相同则无需重新请求资源,如果不相同,则重新发送资源请求。
设置过期时间 <meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT"> 设置缓存 <meta http-equiv="Pragma" content="no-cache">
Cache-control:max-age(单位为s),当某一个资源的响应头设置max-age=3600, 则表示在1h时间内,服务器的资源发生变化,浏览器都不会想服务器发送该资源的请求,直接使用缓存。并且max-age会覆盖Expires。 如下图所示
Cache-control:s-maxage,s-maxage表示CDN缓存,也就是代理缓存,如果设置s-maxage=60,表示60秒内无论cdn服务器的该资源发生怎么样的改变,都不会重新请求,并且s-maxage会覆盖max-age和Expires.
Cache-control:public,指定是否是共享缓存,如果设置Cache-control的值设置为public,则表示多个浏览器之间可以共同使用该资源缓存。如果没有指定Cache-control是为private还是public,则默认是public.
Cache-control:private,表示该缓存是私有的,不存在用户共享。
Cache-control:no-cache;Cache-control的值设置为no-cache并不代表不缓存,浏览器是缓存的,但是当每一次访问该资源的时候,都要向服务器请求查看资源是否改变,如果改变,则直接重新下载,如果没有改变,则使用缓存。可以在设置完no-cache之后,在设置private,以及设置过期时间为过去的时间。
Cache-control:no-store,表示严格不缓存,每一次资源必须从服务器上重新获取。
Expires:缓存过期时间,Expires=max-age + 最后一次请求的时间。Cache-control和Expires相比,Cache-control的优先级更高。Expires需要和Last-modifyed来一起使用。
Last-Modified和if-modified-since:last-modified是响应头上的属性,if-modifyed-since是请求头的数据。该属性值需要cache-control配合使用。当再次向服务器发送请求该资源时,会携带if-modified-since的请求头字段,到服务器比对和last-modified是否相同。如果相同则直接返回304,直接使用缓存,如果不相同,则再次请求新的数据,返回200。
ETag和if-None-Match:这俩个属性其实和last-modified和if-modified-since类似。不过Etag是服务器更加内容产生的hash字符串,并且Etag是响应头内容。if-None-match是请求头的内容。当再次向服务器发送请求某一个资源时,请求头会携带if-None-match属性,到达服务器后,和Etag进行比对。如果相同,则返回304,如果不相同则返回该资源,并且状态码为200。
Cache-control的优先级比Expires的优先级高。
Etag的优先级要高于Last-modified,当在请求头中会先进行ETag比较,然后再进行Last-modified比较,如果两者都相等,则直接返回304,直接使用缓存资源。两者比较一下,你可能会觉得两者的功能差不多,但是为什么要在http1.1中新增Etag呢?
Cache-control/Expries的优先级要比Last-Modified/Etag的优先级高,当第二次发送请求时,会首先查看Cache-control/Expries是否过期,如果没有过期,则任然使用该资源,如果过期了,则再次向服务器发送请求来请求最新的资源。到达服务器时通过比对Last-modified/Etag是否和原来的值相等,来判断资源是否改变,如果没有改变,则返回304。如果改变了,则返回最新的资源,并且状态码为200。
无法被浏览器缓存的请求
上面的过程可以分为三个阶段:
用户在浏览器采用一些操作,例如,返回上一阶段,下一阶段,刷新页面,强制刷新等操作,这些对于一些缓存属性的影响是不一样的。下面将进行详细解读。
参考---https://blog.csdn.net/weixin_47450807/article/details/122680032