标签：control 缓存 浏览器 请求 Cache modified 详解 资源
一、为什么需要缓存
在前端开发中，我们主要追求的是性能和用户体验。对于一个网站查看性能最简单的方式就是打开网站的速度。而一个好的缓存策略可以大大提升网站的性能。使得已经下载后的资源被重复利用。减少客户端和服务器之间的请求次数，减少带宽，减少网络负荷。
二、什么是缓存
对于web缓存，主要是针对一些web资源（html、 js、图片、数据等），就是介于web服务器和浏览器之间的文件数据副本。当我们第一次打开某一个网页时，浏览器向服务器发起请求，请求所需要的资源。如果我们使用了web缓存，当我们下一次再次访问该网站页面的时候，我们可以根据一些缓存策略，来决定是否直接使用缓存中的一些资源，还是再次向服务端发起请求，从而避免再次向服务器发起请求，减少客户端和服务器之间通信的时延。
三、缓存的作用
- 减少网络带宽的消耗
- 降低服务器压力
- 减少网络延时，加快页面打开速度。
四、浏览器的缓存机制
对于浏览器端的缓存来说，规则是在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呢？
- Last-modified精确到秒，如果在一秒钟内修改多次文件，则无法准确拿到最新的文件。
- 如果缓存文件，打开后但是不修改内容，导致Last-modified发生变化，下一次就没有办法使用缓存文件了。
- 可能存在服务器没有获取准确的修改时间，或者代理服务器时间不一致的情况。
3.Last-Modified/Etag和Cache-control/Expires比较
Cache-control/Expries的优先级要比Last-Modified/Etag的优先级高，当第二次发送请求时，会首先查看Cache-control/Expries是否过期，如果没有过期，则任然使用该资源，如果过期了，则再次向服务器发送请求来请求最新的资源。到达服务器时通过比对Last-modified/Etag是否和原来的值相等，来判断资源是否改变，如果没有改变，则返回304。如果改变了，则返回最新的资源，并且状态码为200。
七、有哪些请求不能进行缓存的
无法被浏览器缓存的请求
- http信息头部cache-control:no-cache , pragma: nocache或者使用cache-control:max-age=0。
- 根据cookie，认证信息决定输入内容的信息是否可以被缓存的。
- 经过https加密的请求。
- post请求无法被缓存。
- 在http响应头中不存在last-modified/Etag和cache-control/expires等。
八、使用缓存流程
上面的过程可以分为三个阶段：
- 本地缓存阶段：如果本地存在缓存，并且通过检查本地资资源的缓存并没有过期，则直接使用本地缓存。
- 协商缓存阶段：如果在本地存在该资源，但是本地资源已经过期，此时就需要封装http请求，向服务端发送请求，检查是否存在更改资源。如果资源没有更改，则直接返回304，直接在本地使用资源。
- 缓存失败阶段：如果资源发生了更改，则重新返回最新的资源，并且返回状态码为200。如果此时不存在该资源，则直接返回404。
九、用户行为与缓存的关系
用户在浏览器采用一些操作，例如，返回上一阶段，下一阶段，刷新页面，强制刷新等操作，这些对于一些缓存属性的影响是不一样的。下面将进行详细解读。
- 刷新（仅仅是F5刷新）：此时对于cache-control/Expires是不生效的，但是last-modified/Etag都生效的，所以此时会向服务器发起请求，用来判断目标文件是否发生变化。
- 强制刷新(F5刷新+ctrl)：此时对于cache-control/expires和last-modified/Etag都不生效，此时必须从服务器拿到新数据。
- 回车或者转向：此时所有的缓存都生效。
十、从缓存角度改善站点
- 同一个资源保证只有一个稳定的url地址。
- css,js,图片资源增加http缓存头，入口html文件不被缓存。
- 减少对cookie的依赖。
- 减少对http协议加密的使用。
参考---https://blog.csdn.net/weixin_47450807/article/details/122680032
标签：control,缓存,浏览器,请求,Cache,modified,详解,资源 来源： https://www.cnblogs.com/pwindy/p/16547366.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。