Java教程

浏览器缓存机制详解

本文主要是介绍浏览器缓存机制详解,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、为什么需要缓存

在前端开发中,我们主要追求的是性能用户体验。对于一个网站查看性能最简单的方式就是打开网站的速度。而一个好的缓存策略可以大大提升网站的性能。使得已经下载后的资源被重复利用。减少客户端和服务器之间的请求次数,减少带宽,减少网络负荷。

二、什么是缓存

对于web缓存,主要是针对一些web资源(html、 js、图片、数据等),就是介于web服务器和浏览器之间的文件数据副本。当我们第一次打开某一个网页时,浏览器向服务器发起请求,请求所需要的资源。如果我们使用了web缓存,当我们下一次再次访问该网站页面的时候,我们可以根据一些缓存策略,来决定是否直接使用缓存中的一些资源,还是再次向服务端发起请求,从而避免再次向服务器发起请求,减少客户端和服务器之间通信的时延。

三、缓存的作用

  1. 减少网络带宽的消耗
  2. 降低服务器压力
  3. 减少网络延时,加快页面打开速度。

四、浏览器的缓存机制

对于浏览器端的缓存来说,规则是在http协议头和html的mate标签中定义的,他们分别从过期机制和校验值来判断是否直接使用该缓存,还是需要从服务器去获取更新的版本。

1.新鲜度(过期机制):也就是缓存副本的有效期。一个缓存副本必须满足以下条件之一,浏览器才会认为它是有效的,足够新的,才会直接使用缓存。

    • http协议头中存在过期时间等信息,并且仍在有效期内。
    • 浏览器已经使用过这个缓存副本,并且在一个会话中已经检查过新鲜度。

2.校验值(验证机制):服务器相应中,在响应头中存在Etag标签,用来验证资源是否更改的标识,如果缓存的标识和服务器的标识相同则无需重新请求资源,如果不相同,则重新发送资源请求。

五、浏览器缓存控制

1.html中的mate标签设置缓存

设置过期时间
<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT"> 
设置缓存
<meta http-equiv="Pragma" content="no-cache">  

2.与缓存有关的字段

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。

六、缓存报文头种类和优先级

1.Cache-control和Expires比较

Cache-control的优先级比Expires的优先级高。

2.Last-Modified和ETag比较

Etag的优先级要高于Last-modified,当在请求头中会先进行ETag比较,然后再进行Last-modified比较,如果两者都相等,则直接返回304,直接使用缓存资源。两者比较一下,你可能会觉得两者的功能差不多,但是为什么要在http1.1中新增Etag呢?

  1. Last-modified精确到秒,如果在一秒钟内修改多次文件,则无法准确拿到最新的文件。
  2. 如果缓存文件,打开后但是不修改内容,导致Last-modified发生变化,下一次就没有办法使用缓存文件了。
  3. 可能存在服务器没有获取准确的修改时间,或者代理服务器时间不一致的情况。

3.Last-Modified/Etag和Cache-control/Expires比较

Cache-control/Expries的优先级要比Last-Modified/Etag的优先级高,当第二次发送请求时,会首先查看Cache-control/Expries是否过期,如果没有过期,则任然使用该资源,如果过期了,则再次向服务器发送请求来请求最新的资源。到达服务器时通过比对Last-modified/Etag是否和原来的值相等,来判断资源是否改变,如果没有改变,则返回304。如果改变了,则返回最新的资源,并且状态码为200。

七、有哪些请求不能进行缓存的

无法被浏览器缓存的请求

  1. http信息头部cache-control:no-cache , pragma: nocache或者使用cache-control:max-age=0。
  2. 根据cookie,认证信息决定输入内容的信息是否可以被缓存的。
  3. 经过https加密的请求。
  4. post请求无法被缓存。
  5. 在http响应头中不存在last-modified/Etag和cache-control/expires等。

八、使用缓存流程

 上面的过程可以分为三个阶段:

  1. 本地缓存阶段:如果本地存在缓存,并且通过检查本地资资源的缓存并没有过期,则直接使用本地缓存。
  2. 协商缓存阶段:如果在本地存在该资源,但是本地资源已经过期,此时就需要封装http请求,向服务端发送请求,检查是否存在更改资源。如果资源没有更改,则直接返回304,直接在本地使用资源。
  3. 缓存失败阶段:如果资源发生了更改,则重新返回最新的资源,并且返回状态码为200。如果此时不存在该资源,则直接返回404。

九、用户行为与缓存的关系

用户在浏览器采用一些操作,例如,返回上一阶段,下一阶段,刷新页面,强制刷新等操作,这些对于一些缓存属性的影响是不一样的。下面将进行详细解读。

  1. 刷新(仅仅是F5刷新):此时对于cache-control/Expires是不生效的,但是last-modified/Etag都生效的,所以此时会向服务器发起请求,用来判断目标文件是否发生变化。
  2. 强制刷新(F5刷新+ctrl):此时对于cache-control/expires和last-modified/Etag都不生效,此时必须从服务器拿到新数据。
  3. 回车或者转向:此时所有的缓存都生效。

十、从缓存角度改善站点  

  1. 同一个资源保证只有一个稳定的url地址。
  2. css,js,图片资源增加http缓存头,入口html文件不被缓存。
  3. 减少对cookie的依赖。
  4. 减少对http协议加密的使用。

 

 参考---https://blog.csdn.net/weixin_47450807/article/details/122680032

这篇关于浏览器缓存机制详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!